import { GridTable, Tooltip } from '@theorchard/suite-components';
import cx from 'classnames';
import React, { createRef } from 'react';
import type { FC } from 'react';
import type { DeliveryStore } from 'src/types';

export interface DeliveryStoreSelectProps {
    className?: string;
    title: string;
    onSelect: (value: DeliveryStore[]) => void;
    deliveryStores: DeliveryStore[];
    selected: DeliveryStore[];
    disabledStores?: DeliveryStore[];
    disabledTooltip?: string;
    carvedOutStores: DeliveryStore[];
    carvedOutTooltip?: string;
    testId?: string;
}

export const DeliveryStoreSelect: FC<DeliveryStoreSelectProps> = ({
    className,
    title,
    onSelect,
    selected,
    deliveryStores,
    disabledStores = [],
    disabledTooltip,
    carvedOutStores,
    carvedOutTooltip,
    testId,
}) => {
    const selectedRows = selected.map(({ id }) => id);

    const isStoreDisabled = (data: DeliveryStore) =>
        disabledStores.some(stores => stores.id === data.id);

    const isStoreCarvedOut = (data: DeliveryStore) =>
        carvedOutStores.some(stores => stores.id === data.id);

    return (
        <div className={cx('DeliveryStoreSelect', className)}>
            <GridTable
                testId={testId}
                className="DeliveryStoreSelect-select"
                data={deliveryStores}
                stickyColumnHeaders={true}
                stickyColumnHeadersOffset={0}
                rowKey="id"
                hideColumnHeaders={false}
                selectable={true}
                rowSelectEnabled={({ data }) =>
                    !isStoreDisabled(data) && !isStoreCarvedOut(data)
                }
                selectedRowKeys={selectedRows}
                onSelectedRowsChanged={rows => {
                    const selectedStores = deliveryStores.filter(stores =>
                        rows.some(row => row === stores.id)
                    );
                    onSelect(selectedStores);
                }}
                emptyStateTitle={$t(
                    'releaseScheduler.deliveryStoreSelect.emptySelect'
                )}
                onRowClick={({ data }) => {
                    const alreadySelectedIndex = selectedRows.indexOf(data.id);
                    const selectedIds =
                        alreadySelectedIndex !== -1
                            ? [
                                  ...selectedRows.slice(
                                      0,
                                      alreadySelectedIndex
                                  ),
                                  ...selectedRows.slice(
                                      alreadySelectedIndex + 1
                                  ),
                              ]
                            : [...selectedRows, data.id];
                    const newSelectedStores = deliveryStores.filter(stores =>
                        selectedIds.includes(stores.id)
                    );
                    onSelect(newSelectedStores);
                }}
                rowClickEnabled={({ data }) =>
                    !isStoreDisabled(data) && !isStoreCarvedOut(data)
                }
            >
                <GridTable.Column
                    minWidth="210px"
                    title={title}
                    name="deliveryStore-name"
                    Cell={({ data }: { data: DeliveryStore }) => {
                        const tooltips = disabledTooltip && carvedOutTooltip;
                        const disabled = isStoreDisabled(data);
                        const carvedOut = isStoreCarvedOut(data);

                        if (tooltips && (disabled || carvedOut)) {
                            const overlayRef = createRef<HTMLDivElement>();
                            return (
                                <div
                                    className="DeliveryStoreSelect-disabled-store"
                                    ref={overlayRef}
                                >
                                    <Tooltip
                                        id="disabled-service-tooltip"
                                        container={overlayRef}
                                        placement="top"
                                        message={
                                            carvedOut
                                                ? carvedOutTooltip
                                                : disabledTooltip
                                        }
                                    >
                                        <div data-testid="tooltip-trigger">
                                            {data.name}
                                        </div>
                                    </Tooltip>
                                </div>
                            );
                        }
                        return <>{data.name}</>;
                    }}
                />
            </GridTable>
        </div>
    );
};

export default DeliveryStoreSelect;