import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { VatReturnDetailResponse } from '../../model/types';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { NumericFormat } from 'react-number-format';
import SlideDown from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
import { useState } from 'react';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';

export interface AmountSectionProps {
  detail: VatReturnDetailResponse;
};

export const AmountSection = ({
  detail
}: AmountSectionProps) => {
  const { t, i18n } = useTranslation();
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  const openSection = () => {
    const status = !isOpen;
    setIsOpen(status);
  };

  const onRequestDownload = (userEmail?: string) => {

  };

  const onClickToOpenDownloadBottomSheet = () => {
    setDownloadBottomSheetOn(true);
  };

  return (
    <>
      <div className="txn-num-group">
        <div className="txn-amount">
          <div className="value">
            {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.totalAmount || 0) })}
          </div>
          <button
            className="chip-btn"
            type="button"
            onClick={ () => openSection() }
          >
            <span>{t('vatReturn.amountDetail')}</span> <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
          </button>
        </div>
        <SlideDown className={'my-dropdown-slidedown'}>
        { isOpen &&
          <div className="amount-expand">
            <ul className="amount-list">
              <li className="amount-item">
                <span className="label">·&nbsp;&nbsp;{t('vatReturn.supplyAmount')}</span>
                <span className="value">
                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.supplyAmount || 0) })}
                </span>
              </li>
              <li className="amount-item">
                <span className="label">·&nbsp;&nbsp;{t('vatReturn.vat')}</span>
                <span className="value">
                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(detail.vatAmount || 0) })}
                </span>
              </li>
            </ul>
          </div>
        }
        </SlideDown>
        <div className="txn-mid">
          <span className="value">{ detail.mid }</span>
        </div>
        <div className="txn-mid">
          <span className="value">
            { !!detail.issueDate &&
              moment(detail.issueDate).format('YYYY.MM.DD')
            }
          </span>
        </div>
        <div className="txn-doc">
          <button
            className="doc-btn"
            type="button"
            onClick={ onClickToOpenDownloadBottomSheet }
          >{t('vatReturn.taxInvoice')}</button>
        </div>
      </div>
      { !!downloadBottomSheetOn &&
        <EmailBottomSheet
          bottomSheetOn={ downloadBottomSheetOn }
          setBottomSheetOn={ setDownloadBottomSheetOn }
          imageSave={ true }
          sendEmail={ true }
          sendRequest={ onRequestDownload }
        ></EmailBottomSheet>
      }
    </>
  );
};