import { GridTable } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import dayjs from 'dayjs';
import React from 'react';
import type { FC } from 'react';
import type {
    MarketingProgramInfo,
    MarketingProgramInfosState,
} from 'src/types';

export interface MarketingBlurbTableProps {
    editable: boolean;
    marketingProgramInfosState: MarketingProgramInfosState;
    onView: (row: MarketingProgramInfo) => void;
    onEdit: (row: MarketingProgramInfo) => void;
}

interface StringMap {
    [key: string]: string;
}

const MarketingProgramScope: StringMap = {
    MARKETING_PROGRAM_INFO_INTERNAL_SCOPE: 'Internal Only',
    MARKETING_PROGRAM_INFO_PUBLIC_SCOPE: 'Public',
};

const marketingProgramEntity: StringMap = {
    MARKETING_PROGRAM_INFO_LABEL: 'Label',
    MARKETING_PROGRAM_INFO_ARTIST: 'Artist',
    MARKETING_PROGRAM_INFO_PRODUCT: 'Release',
    MARKETING_PROGRAM_INFO_PROJECT: 'Project',
};

const marketingProgramType: StringMap = {
    NEW_RELEASE_COMING_SOON: 'New release coming soon',
    NEW_DIGITAL_ONLY_RELEASE_COMING: 'New digital-only release coming',
    PRESS_COVERAGE: 'Press coverage',
    TOUR_PLANS: 'Tour plans',
    RADIO_ADD: 'Radio add',
    TV_APPEARANCE: 'TV appearance',
    OTHER_MAJOR_PUBLIC_APPEARANCE: 'Other major public appearance',
    AWARDS_FOR_THE_ARTIST_OR_RELEASE: 'Awards for the artist or release',
    ONE_SHEET: 'One Sheet',
    GREAT_CHART_POSITION_ACHIEVED: 'Great chart position achieved',
    STRONG_CD_SALES_INFO: 'Strong CD sales info',
    MARKETING_DRIVERS: 'Marketing Drivers',
    ARTISTS_BIO_ADDED_OR_UPDATED: "Artist's bio (added or updated)",
    ARTIST_PHOTOS_ADDED_OR_UPDATED: 'Artist photos (added or updated)',
    MARKETING_BLURB: 'Marketing Blurb',
    FLASHLIGHT_BLURB: 'Flashlight Blurb',
    SOUNDS_LIKE: 'Sounds Like',
    FEATURED_BLURB: 'Featured Blurb',
    PRESS_KIT: 'Press Kit',
    MARKETING_HIGHLIGHTS: 'Marketing Highlights',
    TRACK_LYRICS: 'Track Lyrics',
    SYNC_HIGHLIGHTS: 'Sync Highlights',
};

export const MarketingBlurbTable: FC<MarketingBlurbTableProps> = ({
    editable,
    marketingProgramInfosState,
    onView,
    onEdit,
}) => {
    const className = 'MarketingBlurbTable';
    const i18nPrefix = 'marketingSection.marketingBlurbTable';

    const { marketingProgramInfos, setMarketingProgramInfos } =
        marketingProgramInfosState;
    const isEmpty = marketingProgramInfos?.length === 0;

    return (
        <GridTable
            className={className}
            bordered={!isEmpty}
            shadowed={!isEmpty}
            data={marketingProgramInfos}
            rowKey={'marketingProgramInfoId'}
            paginated={false}
            rowActions={
                editable
                    ? {
                          edit: row => onEdit(row),
                          delete: {
                              icon: <GlyphIcon name="trash" size={16} />,
                              onClick: row =>
                                  setMarketingProgramInfos(
                                      marketingProgramInfos.filter(
                                          r =>
                                              r.marketingProgramInfoId !==
                                              row.marketingProgramInfoId
                                      )
                                  ),
                          },
                      }
                    : {
                          view: {
                              icon: <GlyphIcon name="externalLink" size={16} />,
                              onClick: row => onView(row),
                          },
                      }
            }
        >
            <GridTable.Column
                title={$t(`${i18nPrefix}.columnHeaders.description`)}
                name="description"
                className="description"
                minWidth="50%"
            />
            <GridTable.Column
                title={$t(`${i18nPrefix}.columnHeaders.entityType`)}
                name="entityType"
                Cell={({ data }: { data: MarketingProgramInfo }) => (
                    <div className="GridTable-cell-text">
                        {marketingProgramEntity[data.entityType]}
                    </div>
                )}
            />
            <GridTable.Column
                title={$t(`${i18nPrefix}.columnHeaders.marketingProgram`)}
                name="marketingProgram"
                Cell={({ data }: { data: MarketingProgramInfo }) => (
                    <div className="GridTable-cell-text">
                        {marketingProgramType[data.marketingProgram]}
                    </div>
                )}
            />
            <GridTable.Column
                title={$t(`${i18nPrefix}.columnHeaders.scope`)}
                name="scope"
                Cell={({ data }: { data: MarketingProgramInfo }) => (
                    <div className="GridTable-cell-text">
                        {MarketingProgramScope[data.scope]}
                    </div>
                )}
            />
            <GridTable.Column
                title={$t(`${i18nPrefix}.columnHeaders.dateAdded`)}
                name="dateAdded"
                Cell={({ data }: { data: MarketingProgramInfo }) => (
                    <div className="GridTable-cell-text">
                        {data.dateAdded
                            ? dayjs(data.dateAdded).format('YYYY-MM-DD')
                            : ''}
                    </div>
                )}
            />
            <GridTable.Column
                title={$t(`${i18nPrefix}.columnHeaders.attachment`)}
                name="attachment"
                Cell={({ data }: { data: MarketingProgramInfo }) => (
                    <div className="GridTable-cell-text">
                        {data.attachment
                            ? $t(`${i18nPrefix}.Yes`)
                            : $t(`${i18nPrefix}.None`)}
                    </div>
                )}
            />
        </GridTable>
    );
};

export default MarketingBlurbTable;