import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { DetailAmountInfo } from '@/entities/settlement/ui/detail-amount-info';
import { DetailSettlementInfo } from '@/entities/settlement/ui/detail-settlement-info';
import { HeaderType } from '@/entities/common/model/types';
import { 
  SettlementDetailParams,
  DetailResponse,
  DetailAmountInfoProps,
  DetailSettlementInfoProps,
} from '@/entities/settlement/model/types';
import {
  useSetOnBack, 
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';

export const DetailPage = () => {
  const { navigate } = useNavigate();
  const { tid } = useParams();

  const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
  const [settlementInfo, setSettlementInfo] = useState<DetailSettlementInfoProps>();
  const [showAmount, setShowAmount] = useState<boolean>(false);
  const [showSettlement, setShowSettlement] = useState<boolean>(false);

  useSetHeaderTitle('정산내역 상세');
  useSetHeaderType(HeaderType.RightClose);
  useSetOnBack(() => {
    navigate(PATHS.settlement.list);
  });
  useSetFooterMode(false);

  const onClickToShowInfo = (info: string) => {
    if(info === 'amount'){
      setShowAmount(!showAmount);
    }
    else if(info === 'settlement'){
      setShowSettlement(!showSettlement);
    }
  };

  return (
    <>
      <main>
        <div className="tab-content">
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
                <div className="txn-num-group">
                  <div className="txn-amount">
                    <div className="value">63,736,320<span className="unit">원</span></div>
                    {/*
                    <button className="chip-btn" type="button">금액상세 <img src="../images/select_arrow.svg" alt="펼치기"/></button>
                    */}
                  </div>
                  <div className="txn-date">2025.06.08</div>
                </div>
                <div className="txn-divider minus"></div>
                <DetailAmountInfo
                  amountInfo={ amountInfo }
                  show={ showAmount }
                  tid={ tid }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
                ></DetailAmountInfo>
                <div className="txn-divider"></div>
                <DetailSettlementInfo
                  settlementInfo={ settlementInfo }
                  show={ showSettlement }
                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
                ></DetailSettlementInfo>
              </div>
            </div>
            <div className="apply-row">
              <button className="btn-50 btn-blue flex-1">거래 취소</button>
            </div>
          </div>
        </div>
      </main>
    </>
  );
};