import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
import { FilterMotionDuration, FilterMotionVariants } from '../model/constant';
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 } from 'react';

export interface TaxInoviceSampleProps {
  taxInvoiceOn: boolean;
  setTaxInvoiceOn: (taxInvoiceOn: boolean) => void;
};

export const TaxInvoiceSample = ({
  taxInvoiceOn,
  setTaxInvoiceOn
}: TaxInoviceSampleProps) => {
  const { t } = useTranslation();

  const downloadImage = () => {
    const section = document.getElementById('image-section') as HTMLElement;
    toPng(section).then((image) => {
      const link = document.createElement('a');
      link.download = 'downloadImage.png';
      link.href = image;
      link.click();
      snackBar(t('common.imageRequested'), function(){
        onClickToClose();
      });
    });
  };
  const onClickToClose = () => {
    setTaxInvoiceOn(false);
  };

  useEffect(() => {
    if(!!taxInvoiceOn){
      downloadImage();
    }
  }, [taxInvoiceOn]);


  return (
    <>
      <motion.div 
        className="bottomsheet mail-page"
        initial="hidden"
        animate={ (taxInvoiceOn)? 'hidden': 'hidden' }
        variants={ FilterMotionVariants }
        transition={ FilterMotionDuration }
      >
        <div className="wrap">
          <div className="header">
            <div className="header-top">
              <img 
                className="logo" 
                src={ IMAGE_ROOT + '/mail_nicepay_logo.svg' }
                alt="NICEPAY"
              />
              <img 
                className="close-ic" 
                src={ IMAGE_ROOT + '/ico_close.svg' }
                alt="닫기"
              />
            </div>
            <div className="email-row">
              <div className="label">이메일 발송</div>
              <input 
                className="input40" 
                type="email" 
                placeholder="test@abc.com" 
                aria-label="수신 이메일 주소 입력"
              />
              <a 
                className="btn btn-dark" 
                style={{ width: '46px' }}
              >발송</a>
              <a className="btn btn-primary">인쇄</a>
            </div>
            <div className="divider"></div>
            <div className="title-row">
              <div className="title">신용카드 매출전표</div>
              <select 
                className="select-outline" 
                aria-label="작업 선택"
              >
                <option value="cancel">취소</option>
                <option value="reprint">재출력</option>
              </select>
            </div>
          </div>

          <div id="image-section">
            <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">아이스 페이먼츠 주식회사</div>
              </div>
              <div className="row">
                <div className="k">대표자</div>
                <div className="v">김광철</div>
              </div>
              <div className="row">
                <div className="k">사업자등록번호</div>
                <div className="v">815-81-00527</div>
              </div>
              <div className="row">
                <div className="k">전화번호</div>
                <div className="v">1661-7335</div>
              </div>
              <div className="row">
                <div className="k">주소</div>
                <div className="v">서울 마포구 아현동 크레디트센터빌딩 217 11</div>
              </div>
              <div className="row">
                <div className="k">URL</div>
                <div className="v">home.nicepay.co.kr</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>
                <img src={ IMAGE_ROOT + '/ico_sign.png' } />
              </div>
              <div className="amount-row">
                <div className="k">총 결제금액</div>
                <div className="v">4,552,000원</div>
              </div>
              <div className="row">
                <div className="k">금액</div>
                <div className="v">343,940원</div>
              </div>
              <div className="row">
                <div className="k">부가세</div>
                <div className="v">343,940원</div>
              </div>
              <div className="row split"></div>
              <div className="row">
                <div className="k">카드종류</div>
                <div className="v">신한</div>
              </div>
              <div className="row">
                <div className="k">카드번호</div>
                <div className="v">489023******0070</div>
              </div>
              <div className="row">
                <div className="k">구매자</div>
                <div className="v">홍*동</div>
              </div>
              <div className="row">
                <div className="k">상품명</div>
                <div className="v">곰인형</div>
              </div>
              <div className="row">
                <div className="k">거래유형</div>
                <div className="v">전취소</div>
              </div>
              <div className="row">
                <div className="k">일반/할부</div>
                <div className="v">일시불</div>
              </div>
              <div className="row">
                <div className="k">승인번호</div>
                <div className="v">14219606</div>
              </div>
              <div className="row">
                <div className="k">거래일시</div>
                <div className="v">2025.09.22 | 11:32:29</div>
              </div>
              <div className="row">
                <div className="k">취소일시</div>
                <div className="v">2025.09.22 | 23:10:16</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="20" 
                    height="20" 
                    viewBox="0 0 20 20" 
                    fill="none"
                  >
                    <path d="M18.4004 0.849609C18.8129 0.849821 19.1502 1.18707 19.1504 1.59961V18.4004C19.1502 18.8129 18.8129 19.1502 18.4004 19.1504H1.59961C1.18707 19.1502 0.849821 18.8129 0.849609 18.4004V11.2002C0.849609 10.7875 1.18694 10.4504 1.59961 10.4502H8.0498V1.59961C8.05002 1.18701 8.38718 0.849716 8.7998 0.849609H18.4004ZM9.5498 17.6504H17.6504V2.34961H9.5498V17.6504ZM2.34961 17.6504H8.0498V11.9502H2.34961V17.6504Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
                    <path d="M12.5496 4.44922V6.5498H11.0496V4.44922H12.5496Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
                    <path d="M16.1496 4.44922V6.5498H14.6496V4.44922H16.1496Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
                    <path d="M12.5496 7.44922V9.5498H11.0496V7.44922H12.5496Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
                    <path d="M16.1496 7.44922V9.5498H14.6496V7.44922H16.1496Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
                    <path d="M12.5496 10.4492V12.5498H11.0496V10.4492H12.5496Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
                    <path d="M16.1496 10.4492V12.5498H14.6496V10.4492H16.1496Z" fill="#2D3436" stroke="#2D3436" strokeWidth="0.3"/>
                    <path d="M6.15039 13.8496V15.1504H3.84961V13.8496H6.15039Z" 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">나이스페이먼츠 주식회사</div>
              </div>
              <div className="row">
                <div className="k">대표자명</div>
                <div className="v">김광철</div>
              </div>
              <div className="row">
                <div className="k">사업자등록번호</div>
                <div className="v">815-81-00527</div>
              </div>
              <div className="row">
                <div className="k">전화번호</div>
                <div className="v">1661-0808</div>
              </div>
              <div className="row">
                <div className="k">주소</div>
                <div className="v">서울특별시 영등포구 문래로28길 25 (문래동3가)</div>
              </div>
            </div>
          </div>
          <div className="notice">신용카드 청구서에는 NICE로 표기됩니다.<br />* 부가세법 제 46조에 따라 신용카드 매출전표를 이용하여 매입세액 공제가 가능합니다.<br />(동법 제 33조 2항에 근거하여 신용카드 매출전표를 발행한 경우에는 세금계산서를 발급하지 아니합니다.)</div>
        </div>
      </motion.div>
    </>
  );
};