import {
    Button,
    Form,
    GlyphButton,
    GridTable,
} from '@theorchard/suite-components';
import React from 'react';
import type { FC } from 'react';
import type { MarketingHighlight } from 'src/types';

export interface TerritoryMarketingHighlightsProps {
    editable: boolean;
    territoryMarketingHighlights: MarketingHighlight[];
    setTerritoryMarketingHighlights: (value: MarketingHighlight[]) => void;
    handleModalOpen: () => void;
}

export const CLASS_NAME = 'TerritoryMarketingHighlights';

const getEmptyState = (editable: boolean) =>
    editable ? (
        <GridTable className={`${CLASS_NAME}-empty-table`} data={[]} />
    ) : (
        <div className={`${CLASS_NAME}-empty-table`}>-</div>
    );

const getTableBody = (
    territoryMarketingHighlights: MarketingHighlight[],
    editable: boolean,
    setTerritoryMarketingHighlight: (
        countryId: string,
        newHighlight: string
    ) => void,
    removeTerritoryMarketingHighlight: (countryId: string) => void
) => {
    return (
        <tbody>
            {territoryMarketingHighlights?.map(
                ({ marketingHighlight, countryId, name }) => (
                    <tr key={countryId}>
                        <td>
                            <div
                                className={`${CLASS_NAME}-table-cell-${countryId}`}
                            >
                                <div
                                    className={`${CLASS_NAME}-table-cell-header-${countryId}`}
                                >
                                    <div
                                        className={`${CLASS_NAME}-table-cell-title-${countryId}`}
                                    >
                                        {`${name} Marketing Highlights`}
                                    </div>
                                    {editable && (
                                        <GlyphButton
                                            className={`${CLASS_NAME}-table-cell-button-${countryId}`}
                                            data-testid="table-cell-delete-button"
                                            name="trash"
                                            onClick={() =>
                                                countryId &&
                                                removeTerritoryMarketingHighlight(
                                                    countryId
                                                )
                                            }
                                        />
                                    )}
                                </div>
                                {editable ? (
                                    <Form.Control
                                        name={`${CLASS_NAME}-table-cell-input-${countryId}`}
                                        className={`${CLASS_NAME}-table-cell-input-${countryId}`}
                                        as="textarea"
                                        rows={12}
                                        value={marketingHighlight}
                                        disabled={!editable}
                                        onChange={e =>
                                            countryId &&
                                            setTerritoryMarketingHighlight(
                                                countryId,
                                                e?.target?.value
                                            )
                                        }
                                    />
                                ) : (
                                    <div
                                        className={`${CLASS_NAME}-table-cell-text-${countryId}`}
                                    >
                                        {marketingHighlight}
                                    </div>
                                )}
                            </div>
                        </td>
                    </tr>
                )
            )}
        </tbody>
    );
};

export const TerritoryMarketingHighlights: FC<
    TerritoryMarketingHighlightsProps
> = ({
    editable,
    territoryMarketingHighlights,
    setTerritoryMarketingHighlights,
    handleModalOpen,
}) => {
    const highlightsLeft: MarketingHighlight[] = [];
    const highlightsRight: MarketingHighlight[] = [];
    if (territoryMarketingHighlights?.length > 0) {
        let left = true;
        for (let i = 0; i < territoryMarketingHighlights.length; i++) {
            if (left) highlightsLeft.push(territoryMarketingHighlights[i]);
            else highlightsRight.push(territoryMarketingHighlights[i]);
            left = !left;
        }
    }

    const setTerritoryMarketingHighlight = (
        countryId: string,
        newHighlight: string
    ) =>
        setTerritoryMarketingHighlights(
            territoryMarketingHighlights.map(item =>
                item.countryId === countryId
                    ? { ...item, marketingHighlight: newHighlight }
                    : item
            )
        );

    const removeTerritoryMarketingHighlight = (countryId: string) =>
        setTerritoryMarketingHighlights(
            territoryMarketingHighlights.filter(e => e.countryId !== countryId)
        );

    return (
        <div
            className={`${CLASS_NAME}`}
            data-testid="territory-marketing-highlights"
        >
            <div className={`${CLASS_NAME}-header`}>
                <div className={`${CLASS_NAME}-title`}>
                    {$t('marketingSection.territoryMarketingHighlights.title')}
                </div>
            </div>
            <div className={`${CLASS_NAME}-body`}>
                {territoryMarketingHighlights.length === 0 ? (
                    getEmptyState(editable)
                ) : (
                    <div className={`${CLASS_NAME}-table`}>
                        <table className={`${CLASS_NAME}-table-left`}>
                            {getTableBody(
                                highlightsLeft,
                                editable,
                                setTerritoryMarketingHighlight,
                                removeTerritoryMarketingHighlight
                            )}
                        </table>
                        <table className={`${CLASS_NAME}-table-right`}>
                            {getTableBody(
                                highlightsRight,
                                editable,
                                setTerritoryMarketingHighlight,
                                removeTerritoryMarketingHighlight
                            )}
                        </table>
                    </div>
                )}
                {editable && (
                    <Button
                        className={`${CLASS_NAME}-add-territory-highlights`}
                        data-testid="add-territory-highlights"
                        variant="link"
                        size="sm"
                        onClick={handleModalOpen}
                    >
                        {$t(
                            'marketingSection.territoryMarketingHighlights.addTerritoryHighlights'
                        )}
                    </Button>
                )}
            </div>
        </div>
    );
};

export default TerritoryMarketingHighlights;