import { useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useCashReceiptDetailMutation } from '@/entities/transaction/api/use-cash-receipt-detail-mutation';
import { IssueInfoWrap } from '@/entities/transaction/ui/info-wrap/issue-info-wrap';
import { DetailInfoWrap } from '@/entities/transaction/ui/info-wrap/detail-info-wrap';
import { HeaderType } from '@/entities/common/model/types';
import { 
  TransactionCategory,
  CashReceiptDetailParams,
  DetailResponse,
  IssueInfo,
  DetailInfo,
  InfoWrapKeys,
  CashReceiptPurposeType
} from '@/entities/transaction/model/types';
import {
  useSetOnBack, 
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { CashReceitPurposeUpdateBottomSheet } from '@/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet';
import { useCashReceiptPurposeUpdateMutation } from '@/entities/transaction/api/use-cash-receipt-purpose-update-mutation';

export const CashReceiptDetailPage = () => {
  const { navigate } = useNavigate();
  const location = useLocation();
  
  const [issueInfo, setIssueInfo] = useState<IssueInfo>();
  const [detailInfo, setDetailInfo] = useState<DetailInfo>();
  const [showDetailInfo, setShowDetailInfo] = useState<boolean>(false);
  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
  const [purposeType, setPurposeType] = useState<CashReceiptPurposeType>();
  
  useSetHeaderTitle('현금영수증 상세');
  useSetHeaderType(HeaderType.RightClose);
  useSetOnBack(() => {
    navigate(PATHS.transaction.cashReceipt.list);
  });
  useSetFooterMode(false);

  const issueNumber = location?.state.issueNumber

  const { mutateAsync: cashReceiptDetail } = useCashReceiptDetailMutation();
  const { mutateAsync: cashReceiptPurposeUpdate } = useCashReceiptPurposeUpdateMutation();
  
  const callPurposeUpdate = () => {
    let newPurpose = (purposeType === CashReceiptPurposeType.EXPENSE_PROOF)
      ? CashReceiptPurposeType.INCOME_DEDUCTION: CashReceiptPurposeType.EXPENSE_PROOF;
    let params = {
      issueNumber: issueNumber,
      newPurpose: newPurpose
    };
    cashReceiptPurposeUpdate(params).then((rs) => {
      setPurposeType(rs.afterPurposeType);
      setBottomSheetOn(false);
      alert('toast : 용도 변경을 성공하였습니다.')
    });  
  };

  const callDetail = () => {
    let cashReceitDetailParams: CashReceiptDetailParams = {
      issueNumber: issueNumber
    };
    cashReceiptDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
      setIssueInfo(rs.issueInfo);
      setDetailInfo(rs.detailInfo);
      if(rs.issueInfo){
        setPurposeType(rs.issueInfo.purpose);
      }
    });
  };
  useEffect(() => {
    callDetail();
  }, []);

  const onClickToOpenInfo = (infoWrapKey: InfoWrapKeys) => {
    if(infoWrapKey === InfoWrapKeys.Detail){
      setShowDetailInfo(!showDetailInfo);
    }
  };

  const onClickToPurposeUpdate = () => {
    setBottomSheetOn(true);
  };

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
                <IssueInfoWrap
                  transactionCategory={ TransactionCategory.CashReceipt }
                  issueInfo={ issueInfo }
                  purposeType={ purposeType }
                ></IssueInfoWrap>
                <div className="txn-divider minus"></div>
                <DetailInfoWrap
                  transactionCategory={ TransactionCategory.CashReceipt }
                  detailInfo={ detailInfo }
                  isOpen={ showDetailInfo }
                  onClickToOpenInfo={ (infoWrapKey) => onClickToOpenInfo(infoWrapKey) }
                ></DetailInfoWrap>
              </div>
            </div>
            <div className="apply-row">
              <button 
                className="btn-50 btn-blue flex-1"
                onClick={ () => onClickToPurposeUpdate() }
              >용도 변경</button>
            </div>
          </div>
        </div>
      </main>
      <CashReceitPurposeUpdateBottomSheet
        setBottomSheetOn={ setBottomSheetOn }
        bottomSheetOn={ bottomSheetOn }
        callPurposeUpdate={ callPurposeUpdate }
      ></CashReceitPurposeUpdateBottomSheet>
    </>
  );
};