import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListDateGroup } from '../list-date-group';
import { AdditionalServiceCategory } from '../../model/types'
import { AccountHolderSearchListItem, AccountHolderSearchListProps } from '../../model/account-holder-search/types';
import { JSX } from 'react';

export const AccountHolderSearchList = ({
    listItems,
    mid
}: AccountHolderSearchListProps) => {
    const { navigate } = useNavigate();

    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.AccountHolderSearch}
                                    key={date + '-' + i}
                                    date={date}
                                    items={list}
                                ></ListDateGroup>
                            );
                        }
                        date = requestDate;
                        list = [];
                    }
                    list.push(items);
                }
            }
        }
        if (list.length > 0) {
            rs.push(
                <ListDateGroup
                    additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
                    mid={mid}
                    key={date + '-last'}
                    date={date}
                    items={list}
                ></ListDateGroup>
            );
        }
        return rs;
    };


    const onClickToNavigate = () => {
        navigate(PATHS.additionalService.accountHolderSearch.request)
    };

    return (
        <>
            <section className="transaction-list">
                {getListDateGroup()}
            </section>
            <div className="apply-row">
                <button
                    className="btn-50 btn-blue flex-1"
                    onClick={() => onClickToNavigate()}
                >조회 신청</button>
            </div>
        </>
    );
}