'use client';

import { cn } from '@/lib';
import { Select } from '../ui/inputs';
import Modal from '../ui/modal';
import Image from 'next/image';
import IconFont from '../ui/iconFont';

type BubbleSelectDialogProps = {};
export default function BubbleSelectDialog(props: BubbleSelectDialogProps) {
  const isVip = true;
  const value = '1';

  const options = [
    {
      disabled: false,
      value: '1',
      label: 'Bubble 1',
      type: 'free',
    },
    {
      value: '2',
      label: 'Bubble 2',
      type: 'vip',
    },
    {
      value: '3',
      label: 'Bubble 3',
      type: 'purchase',
      unlocked: false,
      price: 10,
    },
    {
      value: '4',
      label: 'Bubble 4',
      type: 'purchase',
      unlocked: true,
      price: 10,
    },
  ];

  const getBg = (item: any) => {
    if (item.type === 'free') {
      return 'bg-[rgba(43,34,70,1)]';
    }
    // vip 或 需要购买
    if (item.active) {
      return 'bg-[rgba(49,33,92,1)]';
    }
    return 'bg-[rgba(23,15,44,1)] hover:bg-[rgba(49,33,92,1)]';
  };

  const handlePurchase = () => {};

  return (
    <Modal
      title="Chat Bubble"
      classNames={{
        content: 'w-200',
      }}
      trigger={
        <Select.View icon={'/character/chat_bubble.svg'} text="Chat Bubble" />
      }
    >
      <div className="grid grid-cols-5 gap-5">
        {/* items */}
        {options?.map((i) => {
          const checked = value === i.value;
          return (
            <div
              key={i.value}
              className={cn(
                'group relative flex h-33 cursor-pointer flex-col rounded-[10px]',
                `${getBg(i)}`
              )}
            >
              {/* header  */}
              <div
                className={cn(
                  'm-2.5 flex h-6 items-center',
                  i.type === 'free' ? 'justify-end' : 'justify-between'
                )}
              >
                {i.type === 'vip' && (
                  <Image
                    src={'/component/vip.svg'}
                    width={24}
                    height={24}
                    alt="currency"
                  />
                )}
                {i.type === 'purchase' && (
                  <span className="inline-flex items-center gap-1">
                    <Image
                      src={'/component/currency.svg'}
                      width={24}
                      height={24}
                      alt="currency"
                    />
                    <span className="text-lg font-bold">{i.price}</span>
                  </span>
                )}
                {i.unlocked ? (
                  <div className="text-white/50 group-hover:text-white">
                    <IconFont type="icon-lock" size={18} />
                  </div>
                ) : (
                  <div className="flex-center h-4.5 w-4.5 rounded-full bg-black">
                    {checked && (
                      <div className="h-3 w-3 rounded-full bg-green-600"></div>
                    )}
                  </div>
                )}
              </div>

              {/* content */}
              <div className="flex h-full flex-1 flex-col items-center justify-between pb-2.5">
                <div
                  className="flex-center h-9.5 w-12.5 text-sm text-black"
                  style={{
                    backgroundImage: `url(/bubble/default.png)`,
                    backgroundSize: 'contain',
                    backgroundRepeat: 'no-repeat',
                    backgroundPosition: 'center',
                  }}
                >
                  Hi
                </div>
                <div className="font-blod">{'NAME 1'}</div>
              </div>

              <div
                onClick={() => handlePurchase()}
                style={{
                  backgroundImage:
                    'linear-gradient(92.76deg, rgba(166, 83, 255, 1) 0%, rgba(0, 101, 255, 1) 108.06%, rgba(0, 157, 255, 1) 135.08%)',
                }}
                className="absolute bottom-0 hidden h-7.5 w-full items-center justify-center rounded-full group-hover:flex"
              >
                GET
              </div>
            </div>
          );
        })}
      </div>
    </Modal>
  );
}
