import React, { useEffect, useState } from 'react';
import { Label, SkeletonLoader } from '@theorchard/suite-components';
import { isEmpty } from 'lodash-es';

export interface ContractStoresPropType {
    contractExclusion: any;
    storeList: [];
    storesLoading: boolean;
}

export const ContractStores: React.FC<ContractStoresPropType> = ({
    contractExclusion,
    storeList,
    storesLoading,
}) => {
    const [includedStores, setIncludedStores] = useState<string[]>([]);
    const [excludedStores, setExcludedStores] = useState<string[]>([]);
    const includedStoresArray: any = [];
    const excludedStoresArray: any = [];
    const excludedStoresIds: string[] = [];

    useEffect(() => {
        if (
            storeList.length !== 0 &&
            contractExclusion?.exclusions &&
            'stores' in contractExclusion.exclusions
        ) {
            const { stores } = contractExclusion.exclusions;
            if (!isEmpty(stores)) {
                stores.forEach((storeId: any) => {
                    excludedStoresArray.push({
                        label: storeList[storeId],
                        value: storeId,
                    });
                    excludedStoresIds.push(storeId);
                });
                Object.keys(storeList).forEach((storeId: any) => {
                    if (!excludedStoresIds.includes(storeId))
                        includedStoresArray.push({
                            label: storeList[storeId],
                            value: storeId,
                        });
                });

                if (excludedStoresArray)
                    setExcludedStores(
                        excludedStoresArray.sort((a: any, b: any) =>
                            a.label.localeCompare(b.label)
                        )
                    );
                if (includedStoresArray)
                    setIncludedStores(
                        includedStoresArray.sort((a: any, b: any) =>
                            a.label.localeCompare(b.label)
                        )
                    );
            }
        }
    }, [contractExclusion, storeList]);

    const displayStores = (storesData: any) => (
        <ul>
            {storesData.map(({ label, value }: any) => (
                <li key={value} className="ContractStoresTable-store">
                    {label}
                </li>
            ))}
        </ul>
    );

    return (
        <div className="ContractDetail-stores">
            <h3 className="ContractDetail-header">Services</h3>
            <hr />
            {storesLoading ? (
                <SkeletonLoader />
            ) : (
                <div>
                    <div className="ContractStoresTable-deliveringServices">
                        <div className="ContractStoresTable-header">
                            <Label text="Delivering to" />
                        </div>
                        <div className="ContractStoresTable-storesList">
                            {!isEmpty(includedStores) &&
                            Object.keys(storeList).length !==
                                includedStores.length ? (
                                displayStores(includedStores)
                            ) : (
                                <div className="ContractStoresTable-store">
                                    {isEmpty(excludedStores) ? 'All' : 'None'}
                                </div>
                            )}
                        </div>
                    </div>
                    <div className="ContractStoresTable-nonDeliveringServices">
                        <div className="ContractStoresTable-header">
                            <Label text="Not Delivering to" />
                        </div>
                        <div className="ContractStoresTable-storesList">
                            {!isEmpty(excludedStores) &&
                            Object.keys(storeList).length !==
                                excludedStores.length ? (
                                displayStores(excludedStores)
                            ) : (
                                <div className="ContractStoresTable-store">
                                    {isEmpty(excludedStores) ? 'None' : 'All'}
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
};