import {
  Controller,
  useWatch,
  type Control,
  type UseFormRegister,
} from "react-hook-form";

import type { Color } from "@/services/models/Color";

import clsx from "clsx";
import Image from "next/image";

import CloseSVG from "@/assets/icons/close.svg";

import Button from "@/components/Button/Button";
import Input from "@/components/Input/Input";
import { Select } from "@/components/Select";

import type { FormData } from "@/lib/schemas/NewProductForm.schema";
import styles from "./VariationItem.module.scss";

export default function VariationItem({
  index,
  colors,
  control,
  register,
  isRemovable,
  onRemove,
}: {
  index: number;
  colors: Color[];
  control: Control<FormData>;
  register: UseFormRegister<FormData>;
  isRemovable: boolean;
  onRemove: () => void;
}) {
  /* eslint-disable-next-line @typescript-eslint/restrict-template-expressions
     -- RHF caviat */
  const idBase = `variations.${index}` as const;
  const coverId = `${idBase}.cover` as const;
  const coverFile = useWatch({ control, name: coverId });
  const defaultCover = useWatch({ control, name: `${idBase}.coverURL` });
  const cover = coverFile
    ? URL.createObjectURL(coverFile)
    : (defaultCover ?? null);

  return (
    <tr className={styles["variation-item"]}>
      <th>
        {isRemovable && (
          <Button variant="plain" icon={CloseSVG} onClick={onRemove} />
        )}
      </th>
      <td>
        <Controller
          control={control}
          name={coverId}
          rules={{ required: true }}
          render={({ field }) => (
            <input
              type="file"
              accept="image/*"
              id={coverId}
              onChange={(event) => {
                field.onChange(event.target.files?.[0] ?? null);
              }}
              hidden
            />
          )}
        />
        <label htmlFor={coverId}>
          {cover ? (
            <div className={styles["variation-item__cover-wrapper"]}>
              <Image
                src={cover}
                alt=""
                fill
                className={styles["variation-item__cover"]}
              />
            </div>
          ) : (
            <span>Загрузить</span>
          )}
        </label>
      </td>
      <td>
        <Controller
          control={control}
          name={`${idBase}.color`}
          rules={{ required: true }}
          render={({ field }) => (
            <Select.Root value={field.value} onChange={field.onChange}>
              {colors.map((color) => (
                <Select.Option
                  key={color.name}
                  imageURL={color.image.url}
                  value={color.name}
                />
              ))}
            </Select.Root>
          )}
        />
      </td>
      <td>
        <Input
          type="number"
          {...register(`${idBase}.price`, {
            required: true,
            valueAsNumber: true,
          })}
          className={clsx(
            styles["variation-item__input"],
            styles["variation-item__price-input"],
          )}
        />
      </td>
      <td>
        <div className={styles["variation-item__discount-container"]}>
          <Input
            type="number"
            {...register(`${idBase}.discountValue`, {
              valueAsNumber: true,
            })}
            className={clsx(
              styles["variation-item__input"],
              styles["variation-item__discount-value-input"],
            )}
          />
          <Controller
            control={control}
            name={`${idBase}.discountType`}
            rules={{ required: true }}
            render={({ field }) => (
              <Select.Root
                value={field.value}
                noClear
                onChange={field.onChange}
                className={styles["variation-item__discount-type-input"]}
              >
                <Select.Option value="percent">%</Select.Option>

                <Select.Option value="amount">&#8381;</Select.Option>
              </Select.Root>
            )}
          />
        </div>
      </td>
      <td>
        <Input
          type="number"
          {...register(`${idBase}.stock`, {
            required: true,
            valueAsNumber: true,
          })}
          className={clsx(
            styles["variation-item__input"],
            styles["variation-item__stock-input"],
          )}
        />
      </td>
      <td>
        <input
          type="checkbox"
          {...register(`${idBase}.quickShip`)}
          className={styles["variation-item__input"]}
        />
      </td>
    </tr>
  );
}