import { IMAGE_ROOT } from "@/shared/constants/common";
import { Breakdown } from "../model/types";
import moment from "moment";
import { NumericFormat } from "react-number-format";
import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css';
import { useEffect, useState } from "react";
import { useTranslation } from 'react-i18next';

export interface VatReturnListDetailBottomSheetProps {
  bottomSheetOn: boolean;
  setBottomSheetOn: (bottomSheetOn: boolean) => void;
  breakdown: Array<Breakdown>;
  transactionAmount?: number;
  supplyAmount?: number;
  vatAmount?: number;
  totalAmount?: number;
};

export const VatReturnListDetailBottomSheet = ({
  bottomSheetOn,
  setBottomSheetOn,
  breakdown,
  transactionAmount,
  supplyAmount,
  vatAmount,
  totalAmount
}: VatReturnListDetailBottomSheetProps) => {
  const { t, i18n } = useTranslation();
  const [isOpenDetail, setIsOpenDetail] = useState<Array<boolean>>([]);

  const onClickToClose = () => {
    setBottomSheetOn(false);
  };
  const openDetail = (index: number) => {
    let arr = breakdown.map((value, index) => false);
    arr[index] = true;
    setIsOpenDetail(arr);
  };

  useEffect(() => {
    let arr = breakdown.map((value, index) => false);
    setIsOpenDetail(arr);
  }, [])

  return (
    <>
      <div className="bg-dim"></div>
      <div className="bottomsheet">
        <div className="bottomsheet-header">
          <div className="bottomsheet-title">
            <h2>{t('vatReturn.viewDetails')}</h2>
            <button
              className="close-btn"
              type="button"
            >
              <img
                src={ IMAGE_ROOT +'/ico_close.svg' }
                alt={t('common.close')}
                onClick={ onClickToClose }
              />
            </button>
          </div>
        </div>

        <div className="bottomsheet-content expand">
          <div className="tax-detail-accordion">
            <div className="summary">
              <div className="row">
                <div className="label desc dot">{t('vatReturn.transactionAmount')} :</div>
                <div className="value">
                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(transactionAmount || 0) })}
                </div>
              </div>
              <div className="row">
                <div className="label desc dot">{t('vatReturn.supplyAmount')} :</div>
                <div className="value">
                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(supplyAmount || 0) })}
                </div>
              </div>
              <div className="row">
                <div className="label desc dot">{t('vatReturn.vat')} :</div>
                <div className="value">
                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(vatAmount || 0) })}
                </div>
              </div>
              <div className="row">
                <div className="label desc dot">{t('vatReturn.totalAmount')} :</div>
                <div className="value">
                  {t('home.money', { value: new Intl.NumberFormat('en-US').format(totalAmount || 0) })}
                </div>
              </div>
            </div>
            { breakdown && breakdown.length > 0 &&
              <div className="list">
                <div className="list-header">
                  <div className="head-date">{t('vatReturn.transactionDate')}</div>
                  <div className="head-amount">{t('vatReturn.totalAmount')}</div>
                </div>
                { 
                  breakdown.map((value, index) => (
                    <>
                      <div className="item">
                        <span className="dot"></span>
                        <span className="date">{ value.transactionDate? moment(value.transactionDate).format('YYYY-MM-DD'): '' }</span>
                        <div className="amount">
                          <span className="text">
                            {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.totalAmount || 0) })}
                          </span>
                          <img
                            className="arrow down"
                            src={ IMAGE_ROOT + '/ico_arrow.svg' }
                            onClick={ () => openDetail(index) }
                          />
                        </div>
                      </div>
                      <SlideDown className={'my-dropdown-slidedown'}>
                        { isOpenDetail[index] &&
                          <div className="item item-detail">
                            <div className="labels">
                              <span>{t('vatReturn.transactionAmount')}</span>
                              <span>{t('vatReturn.supplyAmount')}</span>
                              <span>{t('vatReturn.vat')}</span>
                            </div>
                            <div className="values">
                              <span>
                                {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.transactionAmount || 0) })}
                              </span>
                              <span>
                                {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.supplyAmount || 0) })}
                              </span>
                              <span>
                                {t('home.money', { value: new Intl.NumberFormat('en-US').format(value.vatAmount || 0) })}
                              </span>
                            </div>
                          </div>
                        }
                      </SlideDown>
                    </>
                  ))
                }
              </div>
            }
          </div>
        </div>
      </div>
    </>
  );
};