import AlbumPriceSetting, { AlbumPriceFormData } from "@/components/features/album-price-setting";
import { Checkbox } from "@/components/ui/checkbox";
import { GenImageOutput } from "@/services/create";
import Image from "next/image";
import React from "react";

type SelectedImage = {
  url: string;
  width: number;
  height: number;
}

const MultipleViewerAction = ({
  isSelected,
  currentImage,
  onChange,
  lockPriceImages,
  setLockPriceImages,
  showPrice = true,
}: {
  isSelected: boolean;
  currentImage: string;
  onChange: (image: string) => void;
  lockPriceImages: Array<SelectedImage & { unlockPrice: number }>;
  setLockPriceImages: (datas: Array<SelectedImage & { unlockPrice: number }> | ((prev: Array<SelectedImage & { unlockPrice: number }>) => Array<SelectedImage & { unlockPrice: number }>)) => void;
  showPrice?: boolean;
}) => {

  const currentImageData = lockPriceImages.find(item => item.url === currentImage);
  const unlockPrice = currentImageData?.unlockPrice || 0;

  const handleSelect = () => {
    onChange(currentImage);
  }

  const handleSetAlbumImageUnlockMethod = async (formData: AlbumPriceFormData) => {
    setLockPriceImages(p => {
      if (p.some(item => item.url === currentImage)) {
        return p.map(item => {
          if (item.url === currentImage) {
            return { ...item, unlockPrice: Number(formData.price) || 0 }
          }
          return item
        })
      }
      return [...p, { url: currentImage, width: 1440, height: 2560, unlockPrice: Number(formData.price) || 0 }]
    });
  }

  const renderPayAction = () => {
    if (!!unlockPrice) {
      return (
        <div className="flex items-center gap-3">
          <div className="txt-label-m text-txt-primary-normal">
            How to Unlock:
          </div>
          <div className="flex items-center gap-1">
            <Image src="/icons/diamond.svg" alt="diamond" width={16} height={16} />
            <div className="txt-numMonotype-s text-txt-primary-normal">
              {unlockPrice}
            </div>
          </div>
        </div>
      )
    }
    return (
      <div className="txt-label-m text-txt-primary-normal">
        How to Unlock: Free
      </div>
    )
  }

  if (!showPrice) {
    return (
      <>
        <div className="w-px h-6 bg-outline-normal" />
        <div className="h-8 flex items-center justify-center bg-surface-element-light-normal rounded-full backdrop-blur-lg px-3 gap-2 cursor-pointer" onClick={() => handleSelect()}>
          <Checkbox shape="round" checked={isSelected} />
          <div className="txt-label-s">Select</div>
        </div>
      </>
    )
  }

  return (
    <>
      <div className="w-px h-6 bg-outline-normal" />
      <div
        className="h-8 flex items-center justify-center bg-surface-element-light-normal rounded-full backdrop-blur-lg px-3 gap-2 cursor-pointer"
        onClick={() => handleSelect()}
      >
        <Checkbox shape="round" checked={isSelected} />
        <div className="txt-label-s">Select</div>
      </div>
      <div className="w-px h-6 bg-outline-normal" />
      <div className="flex items-center gap-3">
        {renderPayAction()}
        <AlbumPriceSetting defaultUnlockPrice={unlockPrice || unlockPrice === 0 ? unlockPrice * 100 : undefined} onConfirm={handleSetAlbumImageUnlockMethod} />
      </div>
    </>
  );
}
 
export default React.memo(MultipleViewerAction);