'use client';

import { Gender } from '@/types/user';
import { useCurrentUser } from '@/hooks/auth';
import { useRouter } from 'next/navigation';
import { Checkbox } from '@/components/ui/checkbox';
import { Button } from '@/components/ui/button';
import { useTranslations } from 'next-intl';

type MaskListProps = {
  selectAble?: boolean;
  value?: null;
  onChange?: (mask: any) => void;
  onAdd?: () => void;
};

export default function MaskList(props: MaskListProps) {
  const t = useTranslations('profile.mask');
  const { selectAble, value, onChange, onAdd } = props;
  const { data: user } = useCurrentUser();
  const router = useRouter();

  const masks = [
    {
      nickname: 'NickName',
      gender: 0,
      age: 18,
      whoAmI: ' whoAmI whoAmI whoAmI whoAmI whoAmI whoAmI whoAmI whoAmI',
    },
  ];

  const handleSelect = (mask: any) => {
    if (selectAble) {
      onChange?.(mask);
    } else {
      router.push(`/profile/mask/${mask.nickname}`);
    }
  };

  const iconRender = (mask: any) => {
    if (selectAble) {
      return <Checkbox shape="round" checked />;
    } else {
      return <i className="iconfont icon-arrow-right-border" />;
    }
  };

  return (
    <div className="flex flex-col gap-2">
      {masks.map((mask) => (
        <div key={mask.nickname} className="rounded-lg overflow-hidden">
          <div
            onClick={() => handleSelect(mask)}
            className="flex bg-white/10 px-4 py-3 items-center justify-between"
          >
            <span>
              {mask.nickname}、{mask.gender === Gender.MALE ? t('male') : t('female')}、{mask.age}
            </span>
            {iconRender(mask)}
          </div>
          <div className="bg-white/5 px-4 py-3">{mask.whoAmI}</div>
        </div>
      ))}
      {onAdd && (
        <div className="pt-2">
          <Button variant="primary" className="w-full" onClick={onAdd}>
            {t('addNewMask')}
          </Button>
        </div>
      )}
    </div>
  );
}
