import { IMAGE_ROOT } from '@/shared/constants/common';
import { snackBar } from '@/shared/lib';
import { toPng } from 'html-to-image';
import { useTranslation } from 'react-i18next';
import '@/shared/ui/assets/css/style-tax-invoice.css';
import { useEffect, useState, CSSProperties } from 'react';
import { ClipLoader, FadeLoader } from 'react-spinners';
import { NumericFormat } from 'react-number-format';
import { AmountInfo, CustomerInfo, IssueInfo, MerchantInfo, ProductInfo, TransactionInfo } from '@/entities/transaction/model/types';
import moment from 'moment';

const override: CSSProperties = {
  position: 'fixed',
  display: 'block',
  margin: '0 auto',
  top: '50%',
  left: '50%',
};

export interface CashReceiptSampleProps {
  cashReceiptSampleOn: boolean;
  setCashReceiptSampleOn: (cashReceiptSampleOn: boolean) => void;
  merchantInfo?: MerchantInfo;
  issueInfo?: IssueInfo;
  amountInfo?: AmountInfo;
  transactionInfo?: TransactionInfo;
  customerInfo?: CustomerInfo;
  productInfo?: ProductInfo;
};

export const CashReceiptSample = ({
  cashReceiptSampleOn,
  setCashReceiptSampleOn,
  merchantInfo,
  issueInfo,
  amountInfo,
  transactionInfo,
  customerInfo,
  productInfo
}: CashReceiptSampleProps) => {
  let [loading, setLoading] = useState<boolean>(false);
  let [color, setColor] = useState<string>('#0b0606');

  const { t } = useTranslation();

  const downloadImage = () => {
    const section = document.getElementById('image-section') as HTMLElement;
    toPng(section).then((image) => {
      const link = document.createElement('a');
      let fileName = 'cash-receipt-' + moment().format('YYMMDDHHmmss');
      link.download = fileName + '.png';
      link.href = image;
      link.click();
      snackBar(t('common.imageRequested'), function(){
        onClickToClose();
      });
    }).finally(() => {
      setLoading(false);
    });
  };
  const onClickToClose = () => {
    setCashReceiptSampleOn(false);
  };

  const getDateTime = () => {
    let date = '';
    let time = '';
    if(!!issueInfo?.issueDate){
      date = moment(issueInfo?.issueDate).format('YYYY.MM.DD');
    }
    if(!!issueInfo?.issueDate && !!issueInfo?.issueTime){
      time = moment(issueInfo?.issueDate+' '+issueInfo?.issueTime).format('HH:mm:ss');
    }
    if(!!date && !!time){
      return date + ' | ' + time;
    }
    else{
      return '';
    }
  };

  useEffect(() => {
    if(!!cashReceiptSampleOn){
      setLoading(true);
      setTimeout(() => {
        downloadImage();
      }, 300);
    }
  }, [cashReceiptSampleOn]);


  return (
    <>
      <div className="mail-page">
        <div id="image-section">
          <div className="wrap">
            <div className="header">
              <div className="header-top">
                <img 
                  className="logo" 
                  src={ IMAGE_ROOT + '/mail_nicepay_logo.svg' }
                  alt="NICEPAY"
                />
              </div>
              <div className="divider"></div>
              <div className="title-row">
                <div className="title">현금영수증</div>
              </div>
            </div>
            <div className="section">
              <div className="head">
                <div className="icon">
                  <svg 
                    xmlns="http://www.w3.org/2000/svg" 
                    width="20" 
                    height="16" 
                    viewBox="0 0 20 16" 
                    fill="none"
                  >
                    <path d="M5.23633 0.378906C5.54719 0.379069 5.82854 0.555366 5.95898 0.825195L6.00488 0.946289L6.00586 0.947266L8.24023 8.89258H16.3174L17.4688 4.49805H8.92188C8.48682 4.49805 8.12402 4.15788 8.12402 3.72559C8.12427 3.2935 8.48697 2.9541 8.92188 2.9541H18.4941C18.7367 2.95411 18.9686 3.06058 19.1211 3.24805C19.2743 3.4358 19.3284 3.6835 19.2676 3.91602L17.7119 9.85449V9.85547C17.6207 10.2013 17.3001 10.4374 16.9385 10.4375H7.62891C7.27229 10.4375 6.95384 10.2072 6.8584 9.86719L4.62695 1.92383H1.64844C1.21341 1.92383 0.849609 1.58369 0.849609 1.15137C0.849699 0.719302 1.21267 0.37915 1.64746 0.378906H5.23633Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
                    <path d="M8.92133 11.1777C10.187 11.1779 11.2279 12.1683 11.228 13.3984C11.228 14.6285 10.1872 15.6199 8.92133 15.6201C7.65619 15.6201 6.61469 14.6287 6.61469 13.3984C6.61473 12.1683 7.65601 11.1769 8.92133 11.1777ZM8.9223 12.7227C8.52551 12.7227 8.21141 13.0313 8.21136 13.3984C8.21136 13.7659 8.52494 14.0752 8.9223 14.0752C9.31966 14.075 9.63324 13.7656 9.63324 13.3984C9.6332 13.0312 9.31954 12.7221 8.9223 12.7227Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
                    <path d="M15.6186 11.1777C16.8843 11.1779 17.9252 12.169 17.9252 13.3984C17.9252 14.6285 16.8844 15.6199 15.6186 15.6201C14.3535 15.6201 13.312 14.6287 13.312 13.3984C13.312 12.1691 14.3526 11.1777 15.6186 11.1777ZM15.6186 12.7236C15.2218 12.7236 14.9077 13.0322 14.9077 13.3994C14.9077 13.7669 15.2212 14.0762 15.6186 14.0762C16.016 14.076 16.3295 13.7666 16.3295 13.3994C16.3295 13.0331 16.0161 12.7238 15.6186 12.7236Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
                  </svg>
                </div>
                <div className="h-title">상점정보</div>
              </div>
              <div className="row">
                <div className="k">상호</div>
                <div className="v">{ merchantInfo?.merchantName }</div>
              </div>
              <div className="row">
                <div className="k">대표자</div>
                <div className="v">{ merchantInfo?.representativeName }</div>
              </div>
              <div className="row">
                <div className="k">사업자등록번호</div>
                <div className="v">{ merchantInfo?.businessNumber }</div>
              </div>
              <div className="row">
                <div className="k">전화번호</div>
                <div className="v">{ merchantInfo?.phoneNumber }</div>
              </div>
              <div className="row">
                <div className="k">주소</div>
                <div className="v">{ merchantInfo?.address }</div>
              </div>
              <div className="row">
                <div className="k">URL</div>
                <div className="v">{ merchantInfo?.merchantUrl }</div>
              </div>
            </div>
            <div className="divider"></div>
            <div className="section">
              <div className="head">
                <div className="icon">
                  <svg 
                    xmlns="http://www.w3.org/2000/svg" 
                    width="16" 
                    height="20" 
                    viewBox="0 0 16 20" 
                    fill="none"
                  >
                    <path d="M13.7656 0.799805C14.839 0.800034 15.7001 1.70434 15.7002 2.7998V17.2002C15.7001 18.2957 14.839 19.2 13.7656 19.2002H2.23438C1.16097 19.2 0.299907 18.2957 0.299805 17.2002V2.7998C0.299907 1.70434 1.16097 0.800034 2.23438 0.799805H13.7656ZM2.23438 2.40039C2.03318 2.40062 1.85655 2.57273 1.85645 2.7998V17.2002C1.85655 17.4273 2.03318 17.5994 2.23438 17.5996H13.7656C13.9674 17.5994 14.1435 17.4274 14.1436 17.2002V2.7998C14.1435 2.57257 13.9674 2.40062 13.7656 2.40039H2.23438Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4"/>
                    <path d="M11.9355 3.7998C12.3344 3.79989 12.7002 4.09119 12.7002 4.5C12.7002 4.90881 12.3344 5.20011 11.9355 5.2002H4.06445C3.66564 5.20011 3.2998 4.90881 3.2998 4.5C3.2998 4.09119 3.66564 3.79989 4.06445 3.7998H11.9355Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4"/>
                    <path d="M11.9355 6.7998C12.3344 6.79989 12.7002 7.09119 12.7002 7.5C12.7002 7.90881 12.3344 8.20011 11.9355 8.2002H4.06445C3.66564 8.20011 3.2998 7.90881 3.2998 7.5C3.2998 7.09119 3.66564 6.79989 4.06445 6.7998H11.9355Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4"/>
                    <path d="M6.91504 9.7998C7.31807 9.7998 7.7002 10.085 7.7002 10.5C7.7002 10.9157 7.31789 11.2002 6.91504 11.2002H4.08496C3.68193 11.2002 3.2998 10.915 3.2998 10.5C3.2998 10.085 3.68193 9.7998 4.08496 9.7998H6.91504Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4"/>
                    <path d="M10.9414 14.7998C11.3391 14.7998 11.7002 15.093 11.7002 15.5C11.7002 15.907 11.3391 16.2002 10.9414 16.2002H6.05859C5.66094 16.2002 5.2998 15.907 5.2998 15.5C5.2998 15.093 5.66094 14.7998 6.05859 14.7998H10.9414Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.4"/>
                  </svg>
                </div>
                <div className="h-title">결제정보</div>
              </div>
              <div className="amount-row">
                <div className="k">총 결제금액</div>
                <div className="v">
                  <NumericFormat
                    value={ amountInfo?.amount }
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
                </div>
              </div>
              <div className="row">
                <div className="k">과세금액</div>
                <div className="v">
                  <NumericFormat
                    value={ amountInfo?.supplyAmount }
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
                </div>
              </div>
              <div className="row">
                <div className="k">부가세</div>
                <div className="v">
                  <NumericFormat
                    value={ amountInfo?.vatAmount }
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
                </div>
              </div>
              <div className="row">
                <div className="k">면세금액</div>
                <div className="v">
                  <NumericFormat
                    value={ amountInfo?.taxFreeAmount }
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
                </div>
              </div>
              <div className="row">
                <div className="k">봉사료</div>
                <div className="v">
                  <NumericFormat
                    value={ amountInfo?.serviceAmount }
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
                </div>
              </div>
              <div className="row split"></div>
              <div className="row">
                <div className="k">결제수단</div>
                <div className="v">{ transactionInfo?.paymentMethod }</div>
              </div>
              <div className="row">
                <div className="k">현금영수증번호</div>
                <div className="v">{ issueInfo?.issueNumber }</div>
              </div>
              <div className="row">
                <div className="k">주문자</div>
                <div className="v">{ customerInfo?.customerName }</div>
              </div>
              <div className="row">
                <div className="k">상품명</div>
                <div className="v">{ productInfo?.productName }</div>
              </div>
              <div className="row">
                <div className="k">승인번호</div>
                <div className="v">{ issueInfo?.approvalNumber }</div>
              </div>
              <div className="row">
                <div className="k">거래일시</div>
                <div className="v">{ getDateTime() }</div>
              </div>
              <div className="row">
                <div className="k">용도</div>
                <div className="v">{ issueInfo?.purpose }</div>
              </div>
            </div>
            <div className="notice">
              * 본 영수증은 조세특례제한법 제 126조의 3및 동법 시행령 제 121조의 3규정에 의거, 연말정산시 소득공제 혜택 부여의 목적으로 발행됩니다.<br />
              * 현금 거래 완료 건에 대한 국세청의 검증 소요기간은 2일이며 결제하신 다음날 검증이 완료된 현금영수증을 발급받을 수 있습니다.<br />
              * 현금영수증 문의 126-1-1
            </div>
          </div>
        </div>
      </div>
      { !!loading &&
        <>
          <div 
            className="bg-dim"
            style={{ opacity: '0.4' }}
          ></div>
          <FadeLoader
            color={ color }
            loading={ loading }
            cssOverride={ override }
            aria-label="Loading Spinner"
            data-testid="loader" 
          />
        </>
      }
    </>
  );
};