import React from 'react';
import { Alert, GridTable } from '@theorchard/suite-components';
import { capitalize } from 'lodash';
import { EMPTY_CHAR } from 'src/constants';
import type { CellProps } from '@theorchard/suite-components/dist/esm/src/components/table/base/types';
import type { ArtworkComplianceMatch } from 'src/data/queries/product/types';

const CLASS_NAME = 'ArtworkValidationPopover';
const INTL_PREFIX = 'contentReview.artworkValidation';

const FieldNameCell = ({ data }: CellProps<ArtworkComplianceMatch>) => {
    const fieldName = capitalize(data.metadata_field?.replaceAll('_', ' '));
    return <b>{fieldName || EMPTY_CHAR}</b>;
};

const ArtworkMetadataCell = ({ data }: CellProps<ArtworkComplianceMatch>) => {
    const formattedMatches = data.fuzzy_matches_found
        ?.map(match => match.trim())
        .join(', ');

    return <span>{formattedMatches ?? EMPTY_CHAR}</span>;
};

const ProductMetadataCell = ({ data }: CellProps<ArtworkComplianceMatch>) => (
    <span>{data.metadata_value ?? EMPTY_CHAR}</span>
);

interface ArtworkValidationPopoverProps {
    artworkComplianceMatches: ArtworkComplianceMatch[];
}

const ArtworkValidationPopover = ({
    artworkComplianceMatches,
}: ArtworkValidationPopoverProps) => {
    const alertContent = (
        <div className={CLASS_NAME}>
            <div className={`${CLASS_NAME}-title`}>
                {$t('contentReview.artworkValidation.title')}
            </div>
            <div className={`${CLASS_NAME}-subtitle`}>
                {$t(`${INTL_PREFIX}.subtitle`)}
            </div>

            <GridTable
                className={`${CLASS_NAME}-table`}
                data={artworkComplianceMatches}
                columnDefs={[
                    {
                        name: 'fieldName',
                        title: ' ',
                        Cell: FieldNameCell,
                    },
                    {
                        name: 'artworkData',
                        title: $t(`${INTL_PREFIX}.artwork`),
                        Cell: ArtworkMetadataCell,
                    },
                    {
                        name: 'productMetaData',
                        title: $t(`${INTL_PREFIX}.metadata`),
                        Cell: ProductMetadataCell,
                    },
                ]}
                hideColumnSeparators
            />
        </div>
    );

    return <Alert text={alertContent} variant="warn" />;
};

export default ArtworkValidationPopover;