import { Button, GridTable, Radio } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import React from 'react';
import { PriorityType } from 'shared/data/schema';
import type { FC } from 'react';
import type { PageState, TerritoryMarketingPriority } from 'src/types';

export interface MarketingPriorityTableProps {
    editable: boolean;
    marketingPriority: TerritoryMarketingPriority[];
    pageState: PageState;
    onModalOpen: () => void;
    onMarketingPriorityChange: (
        row: TerritoryMarketingPriority,
        newPriority: PriorityType
    ) => void;
    onMarketingPriorityRemove: (row: TerritoryMarketingPriority) => void;
}

export const MarketingPriorityTable: FC<MarketingPriorityTableProps> = ({
    editable,
    marketingPriority,
    pageState,
    onModalOpen,
    onMarketingPriorityChange,
    onMarketingPriorityRemove,
}) => {
    const className = 'MarketingPriorityTable';
    const i18nPrefix = 'marketingSection.marketingPriorityTable';

    const isEmpty = marketingPriority.length === 0;

    const { page, setPage, pageSize, setPageSize } = pageState;
    const pageData = marketingPriority.slice(
        pageSize * page,
        pageSize * page + pageSize
    );

    const addTerritoriesButton = editable && (
        <Button
            className={`${className}-modal-link`}
            data-testid="add-priority-territories"
            variant="link"
            size="sm"
            onClick={() => onModalOpen()}
        >
            {$t(`${i18nPrefix}.addPriorityTerritoriesButton`)}
        </Button>
    );

    const addTerritoriesPlaceholder = (
        <div>
            <div className={`${className}-placeholder-text`}>
                {$t(`${i18nPrefix}.addPriorityTerritoriesMessage`)}
            </div>
            {addTerritoriesButton}
        </div>
    );

    return (
        <GridTable
            bordered={!isEmpty}
            shadowed={!isEmpty}
            data={pageData}
            paginated={!isEmpty && marketingPriority.length > pageSize}
            page={page}
            pageSize={pageSize}
            onPageChange={setPage}
            onPageSizeChange={setPageSize}
            totalCount={marketingPriority.length}
            emptyStateIcon={null}
            emptyStateTitle={addTerritoriesPlaceholder}
            footer={!isEmpty && addTerritoriesButton}
            rowActions={
                editable
                    ? {
                          delete: {
                              icon: <GlyphIcon name="trash" size={16} />,
                              onClick: row => onMarketingPriorityRemove(row),
                          },
                      }
                    : undefined
            }
        >
            <GridTable.Column
                title={$t(`${i18nPrefix}.columnHeaders.territory`)}
                name="name"
                sortable={true}
            />
            <GridTable.Column
                title={$t(`${i18nPrefix}.columnHeaders.marketingPriority`)}
                name="priorityType"
                sortable={true}
                Cell={({ data }: { data: TerritoryMarketingPriority }) => {
                    return (
                        <div className={`${className}-marketing-priority-cell`}>
                            <Radio
                                readOnly
                                data-testid="row-radio-button-a"
                                className={`${className}-marketing-priority-cell-a`}
                                disabled={!editable}
                                checked={data.priorityType === PriorityType.A}
                                onClick={() =>
                                    editable &&
                                    onMarketingPriorityChange(
                                        data,
                                        PriorityType.A
                                    )
                                }
                                label={
                                    <label
                                        title=""
                                        className="form-check-label"
                                        onClick={() =>
                                            editable &&
                                            onMarketingPriorityChange(
                                                data,
                                                PriorityType.A
                                            )
                                        }
                                    >
                                        {$t(`${i18nPrefix}.radioLabels.a`)}
                                    </label>
                                }
                            />
                            <Radio
                                readOnly
                                data-testid="row-radio-button-b"
                                className={`${className}-marketing-priority-cell-b`}
                                disabled={!editable}
                                checked={data.priorityType === PriorityType.B}
                                onClick={() =>
                                    editable &&
                                    onMarketingPriorityChange(
                                        data,
                                        PriorityType.B
                                    )
                                }
                                label={
                                    <label
                                        title=""
                                        className="form-check-label"
                                        onClick={() =>
                                            editable &&
                                            onMarketingPriorityChange(
                                                data,
                                                PriorityType.B
                                            )
                                        }
                                    >
                                        {$t(`${i18nPrefix}.radioLabels.b`)}
                                    </label>
                                }
                            />
                        </div>
                    );
                }}
            />
        </GridTable>
    );
};

export default MarketingPriorityTable;