import { Reorder } from 'framer-motion';
import { UseFieldArrayRemove, UseFormSetValue } from 'react-hook-form';
import { CloseIcon } from '../icons/CloseIcon';
import { MediaUploader } from '../MediaUploader';
import { IArticleFormInput } from '../modals/ArticleFormModal';

interface IArticleSliderImageInputProps {
  setValue: UseFormSetValue<IArticleFormInput>;
  remove: UseFieldArrayRemove;
  item: Record<'img', string> & Record<'id', string>;
  index: number;
  imgIndex: number;
}

export function ArticleSliderImageInput({
  item,
  imgIndex,
  index,
  remove,
  setValue,
}: IArticleSliderImageInputProps) {
  return (
    <Reorder.Item value={item} className="flex items-center" drag>
      <MediaUploader
        dest="blog"
        setValue={setValue}
        fieldName={`blocks.${index}.images.${imgIndex}.img`}
        item={item}
        label="Выберите изображение"
        media="img"
      />
      <button
        className="self-start z-[1]"
        onClick={e => {
          e.preventDefault();
          remove(imgIndex);
        }}
      >
        <CloseIcon />
      </button>
    </Reorder.Item>
  );
}