import { queryUserBalanceLog } from '@/services/user/user';
import { useQuery } from '@tanstack/react-query';
import { AiroButton } from '@workspace/airo-ui/components/AiroButton';
import { Card, CardContent } from '@workspace/airo-ui/components/card';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@workspace/airo-ui/components/dialog';
import { default as Airo_Empty } from '@workspace/airo-ui/custom-components/empty';
import { formatDate } from '@workspace/airo-ui/utils';
import { useTranslations } from 'next-intl';
import { useState } from 'react';

import { Display } from '@/components/display';
import Table from '../Table/Table';

const WalletDialog: React.FC<{}> = () => {
  const [open, setOpen] = useState(false);
  const t = useTranslations('affiliate');
  const tWallet = useTranslations('wallet');

  const { data } = useQuery({
    queryKey: ['walletDialogList'],
    queryFn: async () => {
      const data = await queryUserBalanceLog({
        page: 1,
        size: 4,
      } as API.QueryUserAffiliateListRequest);
      console.log('data', data?.data.data);
      return data?.data?.data?.list || [];
    },
  });

  return (
    <Card className='order-2 rounded-[20px] border border-[#EAEAEA] bg-gradient-to-b from-white to-[#EAEAEA] p-6 md:order-none'>
      <div className='mb-4 flex items-center justify-between'>
        <h3 className='font-medium text-[#666666] sm:text-xl'>{tWallet('title')}</h3>
        <Dialog open={open} onOpenChange={setOpen}>
          <DialogTrigger asChild>
            <AiroButton variant={'dangerLink'} className={'min-w-0 px-1 text-sm text-[#225BA9]'}>
              {t('more')}
            </AiroButton>
          </DialogTrigger>
          <DialogContent className='sm:w-[675px]'>
            <DialogHeader>
              <DialogTitle className='text-left text-2xl sm:text-4xl'>
                {tWallet('title')}
              </DialogTitle>
            </DialogHeader>
            <Table />
          </DialogContent>
        </Dialog>
      </div>

      <div className='space-y-2 sm:space-y-4'>
        {data?.length ? (
          <div className='relative space-y-3'>
            <div
              className={
                'absolute bottom-0 left-0 right-0 h-[60px] bg-white/30 backdrop-blur-[1px]'
              }
            ></div>
            {data?.map((item) => {
              return (
                <Card className='rounded-[15px] px-[20px] sm:rounded-[32px] sm:px-[55px]'>
                  <CardContent className='px-0 py-3 text-[10px] sm:p-3 sm:text-sm'>
                    <ul className='grid grid-cols-4 gap-3 *:flex *:flex-col'>
                      <li className='font-semibold'>
                        <span className='text-[#225BA9]'>{tWallet('createdAt')}</span>
                        <time>{formatDate(item.created_at)}</time>
                      </li>
                      <li className='font-semibold'>
                        <span className='text-[#225BA9]'>{tWallet('type.0')}</span>
                        <span>{tWallet(`type.${item.type}`)}</span>
                      </li>
                      <li className='font-semibold'>
                        <span className='text-[#225BA9]'>{tWallet('amount')}</span>
                        <span>
                          <Display type='currency' value={item.amount} />
                        </span>
                      </li>

                      <li className='font-semibold'>
                        <span className='text-[#225BA9]'>{tWallet('balance')}</span>
                        <span>
                          <Display type='currency' value={item.balance} />
                        </span>
                      </li>
                    </ul>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        ) : (
          <Airo_Empty className={'py-0'} description={t('noInvitationRecords')} />
        )}
      </div>
    </Card>
  );
};

export default WalletDialog;
