import moment from 'moment';
import { useStore } from '@/shared/model/store';
import { ChangeEvent, useEffect, useState } from 'react';
import { NumericFormat } from 'react-number-format';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { AllTransactionList } from '@/entities/transaction/ui/all-transaction-list';
import { 
  TransactionCategory, 
  AllTransactionSearchCl, 
  AllTransactionListParams, 
  ListItemProps, 
  AllTransactionListSummaryParams, 
  AllTransactionListResponse, 
  AllTransactionListSummaryResponse 
} from '@/entities/transaction/model/types';
import { useAllTransactionListMutation } from '@/entities/transaction/api/use-all-transaction-list-mutation';
import { useAllTransactionListSummaryMutation } from '@/entities/transaction/api/use-all-transaction-list-summary-mutation';
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { AllTransactionFilter } from '@/entities/transaction/ui/filter/all-transaction-filter';
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { SortTypeKeys, HeaderType, DefaultRequestPagination } from '@/entities/common/model/types';
import { 
	useSetOnBack,
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';

export const AllTransactionListPage = () => {
  const { navigate } = useNavigate();
  const userMid = useStore.getState().UserStore.mid;

  const [serviceCodeOptions, setServiceCodeOptions] = useState<Array<Record<string, any>>>();
  
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [listItems, setListItems] = useState<Array<ListItemProps>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
  const [mid, setMid] = useState<string>(userMid);
  const [moid, setMoid] = useState<string>('');
  const [tid, setTid] = useState<string>('');
  const [dateCl, setDateCl] = useState<string>('');
  const [goodsName, setGoodsName] = useState<string>('');
  // const [fromDate, setFromDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
  const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
  const [statusCode, setStatusCode] = useState<string>('');
  const [serviceCode, setServiceCode] = useState<string>('01');
  const [minAmount, setMinAmount] = useState<number>();
	const [maxAmount, setMaxAmount] = useState<number>();
  const [cardCode, setCardCode] = useState<string | undefined>();
  const [bankCode, setBankCode] = useState<string | undefined>();
  const [searchCl, setSearchCl] = useState<AllTransactionSearchCl | undefined>();
  const [searchValue, setSearchValue] = useState<string | undefined>();

  const [totalCount, setTotalCount] = useState<number>(0);
  const [totalAmount, setTotalAmount] = useState<number>(0);

  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
  
    
	useSetHeaderTitle('거래내역 조회');
	useSetHeaderType(HeaderType.LeftArrow);
	useSetOnBack(() => {
		navigate(PATHS.home);
	});
	useSetFooterMode(false);
  
  const { mutateAsync: allTransactionList } = useAllTransactionListMutation();
  const { mutateAsync: allTransactionListSummary } = useAllTransactionListSummaryMutation();
  const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
  
  const callList = (option?: {
    sortType?: SortTypeKeys, 
    val?: string
  }) => {
    let listSummaryParams: AllTransactionListSummaryParams = {
      moid: moid,
      tid: tid,
      fromDate: fromDate,
      toDate: toDate,
      statusCode: statusCode,
      serviceCode: option?.val || serviceCode,
      minAmount: minAmount,
      maxAmount: maxAmount,
      dateCl: dateCl,
      goodsName: goodsName,
      cardCode: cardCode,
      bankCode: bankCode,
      searchCl: searchCl,
      searchValue: searchValue,
      sortType: sortType
    };
    let listParams: AllTransactionListParams = {
      ...listSummaryParams,
      ...{
        page: pageParam
      }
    };

    if(listParams.page){
			listParams.page.sortType = option?.sortType || sortType;
    	setPageParam(listParams.page);
		}

    allTransactionList(listParams).then((rs: AllTransactionListResponse) => {
      console.log(rs.content)
      setListItems(rs.content);
    });
    allTransactionListSummary(listSummaryParams).then((rs: AllTransactionListSummaryResponse) => {
      setTotalAmount(rs.totalAmount);
      setTotalCount(rs.totalCount);
    });
  };
  
  const onClickToOpenFilter = () => {
    setFilterOn(!filterOn);
  };
  const onClickToDownloadExcel = () => {
    setEmailBottomSheetOn(true);
    
  };
  const onRequestDownloadExcel = (userEmail?: string) => {
    // tid??? 확인 필요
    /*
    downloadExcel({
      // tid: tid
    }).then((rs) => {

    });
    */
  };
  const onClickToSort = (sort: SortTypeKeys) => {
    setSortType(sort);
    callList({
      sortType: sort
    });
  };
  const callServiceCodeOptions = () => {
    let serviceCodes = useStore.getState().CommonStore.serviceCodes;
    setServiceCodeOptions(serviceCodes);
    setServiceCode(serviceCodes[0].value);
  };

  const onChangeServiceCode = (e: ChangeEvent<HTMLSelectElement>) => {
    let val = e.target.value;
    // onchagne 에서 useState가 즉시 반영 안되므로 값을 직접 바로 넘긴다.
    setServiceCode(val);
    callList({
      val: val
    });
  };

  const getServiceCodeOptions = () => {
    let rs = [];
    if(!!serviceCodeOptions && serviceCodeOptions.length > 0)
    for(let i=0;i<serviceCodeOptions.length;i++){
      rs.push(
        <option 
          key={`key-${i}`}
          value={serviceCodeOptions[i]?.value}
        >{ serviceCodeOptions[i]?.name }</option>
      )
    }
    return rs;
  };

  useEffect(() => {
    callServiceCodeOptions();
  }, []);

  useEffect(() => {
    callList();
  }, [
    mid, moid, tid, 
    fromDate, toDate, 
    statusCode, serviceCode, 
    minAmount, maxAmount, 
    bankCode, cardCode, 
    searchCl, searchValue
  ]);


	return (
		<>
			<main>
				<div className="tab-content">
					<div className="tab-pane sub active">
						<div className="summary-section">
							<div className="summary-label">조회금액</div>
							<div className="summary-amount">
								<span className="amount-text">
                  <NumericFormat
                    value={ totalAmount } 
                    thousandSeparator
                    displayType="text"
                    suffix='원'
                  ></NumericFormat> 
                </span>
								<div className="summary-actions">
									<button className="filter-btn">
										<img 
                      src={ IMAGE_ROOT + '/ico_setting.svg' } 
                      alt="검색옵션"
                      onClick={ () => onClickToOpenFilter() }
                    />
									</button>
									<button className="download-btn">
										<img 
                      src={ IMAGE_ROOT + '/ico_download.svg' } 
                      alt="다운로드"
                      onClick={ () => onClickToDownloadExcel() }
                    />
									</button>
								</div>
							</div>
							<div className="summary-details">
								<div className="detail-item">
									<span className="detail-label">조회일자</span>
									<span className="detail-value">{ moment(fromDate).format('YYYY.MM.DD') } ~ { moment(toDate).format('YYYY.MM.DD') }</span>
								</div>
								<div className="detail-item">
									<span className="detail-label">거래건수</span>
									<span className="detail-value">
                    <NumericFormat
                      value={ totalCount } 
                      thousandSeparator
                      displayType="text"
                      prefix='총 '
                      suffix=' 건'
                    ></NumericFormat>
                  </span>
								</div>
							</div>
						</div>
							
						<div className="filter-section">
							<SortTypeBox
                sortType={ sortType }
                onClickToSort={ onClickToSort }
              ></SortTypeBox>
							<select 
                value={ serviceCode }
                onChange={ (e) => onChangeServiceCode(e) }>
                { getServiceCodeOptions() }
							</select>
						</div>
            <AllTransactionList 
              listItems={ listItems }
              transactionCategory={ TransactionCategory.AllTransaction }
            ></AllTransactionList> 
					</div>
				</div>
			</main>
      <AllTransactionFilter
        filterOn={ filterOn }
        setFilterOn={ setFilterOn }
        mid={ mid }
        fromDate={ fromDate }
        toDate={ toDate }
        statusCode={ statusCode }
        serviceCode={ serviceCode }
        minAmount={ minAmount }
        maxAmount={ maxAmount }
        cardCode={ cardCode }
        bankCode={ bankCode }
        searchCl={ searchCl }
        searchValue={ searchValue }
        setMid={ setMid }
        setMoid={ setMoid }
        setTid={ setTid }
        setFromDate={ setFromDate }
        setToDate={ setToDate }
        setStatusCode={ setStatusCode }
        setServiceCode={ setServiceCode }
        setMinAmount={ setMinAmount }
        setMaxAmount={ setMaxAmount }
        setCardCode={ setCardCode }
        setBankCode={ setBankCode }
        setSearchCl={ setSearchCl }
        setSearchValue={ setSearchValue }
        serviceCodeOptions={ serviceCodeOptions }
      ></AllTransactionFilter>

      { !!emailBottomSheetOn &&
        <EmailBottomSheet
          bottomSheetOn={ emailBottomSheetOn }
          setBottomSheetOn={ setEmailBottomSheetOn }
          imageSave={ false }
          sendEmail={ true }
          sendRequest={ onRequestDownloadExcel }
        ></EmailBottomSheet>
      }
    </>
	);
};