import { toast } from 'react-hot-toast';
import classNames from 'classnames';
import Segment from '../shared/segment';
import { IntroducerType } from '../../api/introducer';
import useCopyToClipboard from '../../hooks/index/use-copy-to-clipboard';
import Button from '../shared/buttons/button';

export type IntroducerPropsType = { introducer: IntroducerType };

function Introducer({ introducer }: IntroducerPropsType) {
  const { copy, isCopied } = useCopyToClipboard();
  return (
    <Segment padded dataTestId='introducer'>
      <div data-testid='code' className='mb-8'>
        <span className='font-medium'>کد معرف:</span>
        <Button
          circular
          size='lg'
          color='indigo'
          colorWeight={700}
          onClick={async () => {
            if (await copy(introducer.code?.text)) {
              toast.success('کد معرف شما با موفقیت کپی شد.');
            } else {
              toast.error('خطا: متاسفانه  کد معرف شما کپی نشد.');
            }
          }}
          className={classNames(
            'mx-auto my-6 bg-gradient-radial',
            'transition-all duration-500 ease-in-out',
            { 'from-green-500 via-green-600 to-emerald-700': isCopied },
            { 'from-sky-800 via-sky-700 to-indigo-700': !isCopied }
          )}
        >
          {!isCopied && 'کپی'}
          {!isCopied && <br />}
          {introducer.code?.text}
        </Button>
      </div>
      <p data-testid='share' className='my-2 flex items-center gap-2'>
        <span className='font-medium'>سهم معرف:</span>
        <span>{introducer.code.share}</span>
        <span>%</span>
      </p>
      <p data-testid='discount' className='my-2 flex items-center gap-2'>
        <span className='font-medium'>تخفیف داوطلب:</span>
        <span>{introducer.code.discount}</span>
        <span>%</span>
      </p>
      <p data-testid='valid-days' className='my-2 flex items-center gap-2'>
        <span className='font-medium'>مدت اعتبار برای هر داوطلب:</span>
        {introducer.code.validDays}
        <span>روز</span>
      </p>
      <p data-testid='student-count' className='my-2 flex items-center gap-2'>
        <span className='font-medium'>تعداد داوطلبان معرفی شده:</span>
        <span>{introducer.studentCount}</span>
        <span>نفر</span>
      </p>
      <p data-testid='share-price' className='my-2 flex items-center gap-2'>
        <span className='font-medium'>کل درآمد معرف:</span>
        {introducer.sharePrice.toLocaleString()}
        <span> ریال</span>
      </p>
      <p data-testid='paid-price' className='my-2 flex items-center gap-2'>
        <span className='font-medium'>دریافتی معرف:</span>
        {introducer.paidPrice.toLocaleString()}
        <span> ریال</span>
      </p>
    </Segment>
  );
}

export default Introducer;
