import React, { useState, useEffect } from 'react';
import CapInput from '@capillarytech/cap-ui-library/CapInput';
import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
import CapCustomCard from '@capillarytech/cap-ui-library/CapCustomCard';
import { injectIntl, FormattedMessage } from 'react-intl';
import Pagination from '../../../../v2Components/Pagination';
import messages from './messages';

const {CapCustomCardList} = CapCustomCard;

export const LineDrawer = ({
    getAllTemplates,
    cardDataList,
    isDrawer,
    searchPlaceholder,
    intl: {
        formatMessage,
    },
    Templates
}) => {

    const [currentPage, updateCurrentPage] = useState(0);
    const [searchText, updateSearchText] = useState('');
    const [isSearching, updateSearchStatus] = useState(false);

    useEffect(() => {
        const { getAllTemplatesInProgress } = Templates || {};
        if (getAllTemplatesInProgress !== undefined) {
            updateSearchStatus(getAllTemplatesInProgress);
        }
    }, [Templates]);

    useEffect(() => {
        if (!isDrawer) {
            updateCurrentPage(0);
            searchTemplate('');
        }
    }, [isDrawer]);

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

    let delayTimer = 0;

    const getAllLineTemplate = ({params = {} , getNextPage, resetPage}, isReRender = false) => {
        let queryParams = {
            sortBy: 'Most Recent',
            ...params,
        };
        let page = currentPage;
        if (getNextPage) {
            page += 1;
        }

        if (resetPage) {
            page = 1;
        }
        queryParams.page = page;
        queryParams.perPage = 25;

        if (params?.name) {
            queryParams.name = params.name;
            queryParams.page = 1;
        }
        updateCurrentPage(page);
        
        getAllTemplates('Line', queryParams);
    };

    const delayedSearch = (callback, ms) => {
        clearTimeout(delayTimer);
        delayTimer = setTimeout(callback, ms);
    }

    const searchTemplate = (value) => {
        updateSearchText(value);
        delayedSearch(() => {
            const params = {
                name: value,
                sortBy: 'Most Recent',
            };
            getAllLineTemplate({params, resetPage: true});
            
      }, 1000);
    }

    return (
        <CapSpin spinning={isSearching} tip={formatMessage(messages.gettingAllTemplates)} style={{width: '100%'}}>
            <CapInput.Search
                className="search-text"
                style={{width: 324}}
                value={searchText}
                placeholder={searchPlaceholder}
                onChange={(e) => searchTemplate(e.target.value)}
                onClear={() => searchTemplate('')}
            />
            <Pagination onPageChange={() => { getAllLineTemplate({getNextPage: true}); }}>
                {
                    !cardDataList.length
                    ? (
                        <CapHeading type="h6" style={{ textAlign: 'center', padding: 20 }}>
                            <FormattedMessage {...messages.noTemplatesFound} />
                        </CapHeading>
                    )
                    : null
                }
                <div className="v2-pagination-container">
                    <CapCustomCardList
                        key={'LINE-card-list'}
                        cardList={cardDataList}
                        type="LINE"
                        style={{marginLeft: '16px'}}
                    />
                </div>
            </Pagination>
        </CapSpin>
        )
}

export default injectIntl(LineDrawer);