import moment from 'moment';
import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { JSX, useEffect, useState } from 'react';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { ListDateGroup } from '../list-date-group';
import { AdditionalServiceCategory } from '../../model/types';
import { ExtensionFundAccountResultExcelParams, ExtensionFundAccountResultExcelResponse, ExtensionFundAccountResultListParams, ExtensionFundAccountResultListResponse, ExtensionFundAccountResultSummaryParams, ExtensionFundAccountResultSummaryResponse, FundAccountResultContent, FundAccountResultContentItem, FundAccountResultStatus, FundAccountSearchCl, FundAccountSearchDateType, FundAccountStatus } from '../../model/fund-account/types';
import { useExtensionFundAccountResultSummaryMutation } from '../../api/fund-account/use-extension-fund-account-result-summary-mutation';
import { useExtensionFundAccountResultExcelMutation } from '../../api/fund-account/use-extension-fund-account-result-excel-mutation';
import { useExtensionFundAccountResultListMutation } from '../../api/fund-account/use-extension-fund-account-result-list-mutation';
import { PATHS } from '@/shared/constants/paths';
import { NumericFormat } from 'react-number-format';
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { FundAccountResultStatusBtnGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
import { FundAccountResultFilter } from '../filter/fund-account-result-filter';
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';

export const FundAccountResultListWrap = () => {
  const { navigate } = useNavigate();

  const userMid = useStore.getState().UserStore.mid;

  const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [listItems, setListItems] = useState<Array<FundAccountResultContentItem>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);

  const [mid, setMid] = useState<string>(userMid);
  const [searchCl, setSearchCl] = useState<FundAccountSearchCl>(FundAccountSearchCl.ACCOUNT_NAME);
  const [searchValue, setSearchValue] = useState<string>('');
  const [searchDateType, setSearchDateType] = useState<FundAccountSearchDateType>(FundAccountSearchDateType.REQUEST_DATE)
  const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
  const [bankCode, setBankCode] = useState<string>('');
  const [resultStatus, setResultStatus] = useState<FundAccountResultStatus>(FundAccountResultStatus.ALL);
  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);

  const [totalRequestCount, setTotalRequestCount] = useState<number>(0);
  const [totalRequestAmount, setTotalRequestAmount] = useState<number>(0);
  const [totalSuccessCount, setTotalSuccessCount] = useState<number>(0);
  const [totalSuccessAmount, setTotalSuccessAmount] = useState<number>(0);
  const [totalFailCount, setTotalFailCount] = useState<number>(0);
  const [totalFailAmount, setTotalFailAmount] = useState<number>(0);


  const { mutateAsync: extensionFundAccountResultList } = useExtensionFundAccountResultListMutation();
  const { mutateAsync: extensionFundAccountResultExcel } = useExtensionFundAccountResultExcelMutation();
  const { mutateAsync: extensionFundAccountResultSummary } = useExtensionFundAccountResultSummaryMutation();
  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
    entries.forEach((entry: IntersectionObserverEntry) => {
      if(entry.isIntersecting){
        console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
        if(onActionIntersect && !!pageParam.cursor){
          callList('page');
        } 
      }
      else{
        console.log('Element is no longer intersecting with the root.');
      }
    });
  };

  const { setTarget } = useIntersectionObserver({ 
    threshold: 1, 
    onIntersect 
  });
  
  const callList = (type?: string) => {
    setOnActionIntersect(false);
    let listParams: ExtensionFundAccountResultListParams = {
      mid: mid,
      searchCl: searchCl,
      searchValue: searchValue,
      searchDateType: searchDateType,
      fromDate: fromDate,
      toDate: toDate,
      bankCode: bankCode,
      resultStatus: resultStatus,
      page: {
				...pageParam,
				...{ sortType: sortType }
			}
    };
    if(type !== 'page' && listParams.page){
      listParams.page.cursor = null;
    }

    extensionFundAccountResultList(listParams).then((rs: any) => {
      if(type === 'page'){
        setListItems([
          ...listItems,
          ...rs.content
        ]);
      }
      else{
        setListItems(rs.content);
      }
			if(rs.hasNext){
        setPageParam({
          ...pageParam,
          ...{ cursor: rs.nextCursor }
        });
        setOnActionIntersect(true);
      }
      else{
        setPageParam({
          ...pageParam,
          ...{ cursor: null }
        });
      }
    });
  };


  const callSummary = () => {
    let params: ExtensionFundAccountResultSummaryParams = {
      mid: mid
    };

    extensionFundAccountResultSummary(params).then((rs: ExtensionFundAccountResultSummaryResponse) => {
      setTotalRequestCount(rs.totalRequestCount);
      setTotalRequestAmount(rs.totalRequestAmount);
      setTotalSuccessCount(rs.totalSuccessCount);
      setTotalSuccessAmount(rs.totalSuccessAmount);
      setTotalFailCount(rs.totalFailCount);
      setTotalFailAmount(rs.totalFailAmount);
    });
  };

  const onClickToOpenEmailBottomSheet = () => {
    setEmailBottomSheetOn(true);
  };

  const onSendRequest = (selectedEmail?: string) => {
    if (selectedEmail) {
      let params: ExtensionFundAccountResultExcelParams = {
        mid: mid,
        email: selectedEmail,
        searchDateType: searchDateType,
        fromDate: fromDate,
        toDate: toDate,
      };
      extensionFundAccountResultExcel(params).then((rs: ExtensionFundAccountResultExcelResponse) => {
        console.log('Excel Download Status:', rs);
      });
    }
    setEmailBottomSheetOn(false);
  };

  const onClickToOpenFilter = () => {
    setFilterOn(!filterOn);
  };

  const onClickToSort = (sort: SortTypeKeys) => {
    setSortType(sort);
  };
  const onClickToStatus = (val: FundAccountResultStatus) => {
    setResultStatus(val);
  };

  const getListDateGroup = () => {
    let rs = [];
    let date = '';
    let list = [];
    for (let i = 0; i < listItems.length; i++) {
      let items = listItems[i];
      if (!!items) {
        let requestDate = items?.requestDate;
        requestDate = requestDate?.substring(0, 8);
        if (!!requestDate) {
          if (i === 0) {
            date = requestDate;
          }
          if (date !== requestDate) {
            if (list.length > 0) {
              rs.push(
                <ListDateGroup
                  additionalServiceCategory={AdditionalServiceCategory.FundAccountResult}
                  mid={mid}
                  key={date + '-' + i}
                  date={date}
                  items={list}
                ></ListDateGroup>
              );
            }
            date = requestDate;
            list = [];
          }
          list.push(items);
        }
      }
    }
    if (list.length > 0) {
      rs.push(
        <ListDateGroup
          additionalServiceCategory={AdditionalServiceCategory.FundAccountResult}
          mid={mid}
          key={date + '-last'}
          date={date}
          items={list}
        ></ListDateGroup>
      );
    }
    return rs;
  };

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

  useEffect(() => {
    callList();
  }, [
    mid,
    searchCl,
    searchValue,
    searchDateType,
    fromDate,
    toDate,
    bankCode,
    resultStatus,
    sortType
  ]);

  const onClickToNavigate = () => {
    navigate(PATHS.additionalService.fundAccount.transferRequest);
  };


  return (
    <>
      <section className="summary-section pt-30">
        <div className="credit-controls">
          <div>
            <input
              className="credit-period"
              type="text"
              value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
              readOnly={true}
            />
            <button
              className="filter-btn"
              aria-label="필터"
              onClick={() => onClickToOpenFilter()}
            >
              <img
                src={IMAGE_ROOT + '/ico_setting.svg'}
                alt="검색옵션"
              />
            </button>
          </div>
          <button
            className="download-btn"
            aria-label="다운로드"
            onClick={() => onClickToOpenEmailBottomSheet()}
          >
            <img
              src={IMAGE_ROOT + '/ico_download.svg'}
              alt="다운로드"
            />
          </button>
        </div>
        <div className="summary-extend">
          <ul className="summary-amount-list">
            <li className="summary-amount-item">
              <span className="label">요청</span>
              <span className="value">
                <span>
                  <NumericFormat
                    value={totalRequestAmount}
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
                </span>
                <span className="unit"> 원 (</span>
                <span>
                  <NumericFormat
                    value={totalRequestCount}
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
                </span>
                <span>건)</span>
              </span>
            </li>
            <li className="summary-amount-item">
              <span className="label">성공</span>
              <span className="value">
                <span>
                  <NumericFormat
                    value={totalSuccessAmount}
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
                </span>
                <span className="unit"> 원 (</span>
                <span>
                  <NumericFormat
                    value={totalSuccessCount}
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
                </span>
                <span>건)</span>
              </span>
            </li>
            <li className="summary-amount-item">
              <span className="label">실패</span>
              <span className="value">
                <span>
                  <NumericFormat
                    value={totalFailAmount}
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
                </span>
                <span className="unit"> 원 (</span>
                <span>
                  <NumericFormat
                    value={totalFailCount}
                    thousandSeparator
                    displayType="text"
                  ></NumericFormat>
                </span>
                <span>건)</span>
              </span>
            </li>
          </ul>
        </div>
      </section>

      <section className="filter-section">
        <SortTypeBox
          sortType={sortType}
          onClickToSort={onClickToSort}
        ></SortTypeBox>
        <div className="excrow mr-0">
          <div className="full-menu-keywords no-padding">
            {
              FundAccountResultStatusBtnGroup.map((value, index) => (
                <span
                  key={`key-service-code=${index}`}
                  className={`keyword-tag ${(resultStatus === value.value) ? 'active' : ''}`}
                  onClick={() => onClickToStatus(value.value)}
                >{value.name}</span>
              ))
            }
          </div>
        </div>
      </section>

      <section className="transaction-list">
        { getListDateGroup() }
        <div ref={ setTarget }></div>
      </section>
      <div className="apply-row">
        <button
          className="btn-50 btn-blue flex-1"
          onClick={ onClickToNavigate }
        >이체 등록</button>
      </div>
      <FundAccountResultFilter
        filterOn={filterOn}
        setFilterOn={setFilterOn}
        mid={mid}
        searchCl={searchCl}
        searchValue={searchValue}
        searchDateType={searchDateType}
        fromDate={fromDate}
        toDate={toDate}
        bankCode={bankCode}
        resultStatus={resultStatus}
        setMid={setMid}
        setSearchCl={setSearchCl}
        setSearchValue={setSearchValue}
        setSearchDateType={setSearchDateType}
        setFromDate={setFromDate}
        setToDate={setToDate}
        setBankCode={setBankCode}
        setResultStatus={setResultStatus}
      ></FundAccountResultFilter>
      <EmailBottomSheet
        bottomSheetOn={emailBottomSheetOn}
        setBottomSheetOn={setEmailBottomSheetOn}
        imageSave={false}
        sendEmail={true}
        sendRequest={onSendRequest}
      ></EmailBottomSheet>
    </>
  );
};