import { Button } from '@theorchard/suite-components';
import React from 'react';
import MarketingBlurbTable from 'src/components/marketingBlurbTable';
import type { FC } from 'react';
import type {
    MarketingProgramInfo,
    MarketingProgramInfosState,
} from 'src/types';

export interface MarketingBlurbProps {
    editable: boolean;
    productId: string;
    marketingProgramInfosState: MarketingProgramInfosState;
}

export const MarketingBlurb: FC<MarketingBlurbProps> = ({
    editable,
    productId,
    marketingProgramInfosState,
}) => {
    const className = 'MarketingBlurb';
    const i18nPrefix = 'marketingSection.marketingBlurb';

    const onAddMaterials = (productId: string) => {
        // Opens old OA page until that functionality is implemented in this section
        window.open(
            `/marketing/add_mkt_program_info.php?varInfoForID=${productId}&varInfoFor=release`
        );
    };

    const onView = (row: MarketingProgramInfo) => {
        // Opens old OA page while that functionality is not implemented in this section
        window.open(
            `/marketing/view_mkt_program_info.php?program_info_id=${row.marketingProgramInfoId}`
        );
    };

    const onEdit = (row: MarketingProgramInfo) => {
        // Opens old OA page until that functionality is implemented in this section
        window.open(
            `/marketing/edit_mkt_program_info.php?program_info_id=${row.marketingProgramInfoId}`
        );
    };

    return (
        <div className={className} data-testid="marketing-blurb">
            <div className={`${className}-header`}>
                <div className={`${className}-title`}>
                    {$t(`${i18nPrefix}.title`)}
                </div>
                <div className={`${className}-add-new-materials-button`}>
                    {editable && (
                        <Button
                            className={`${className}-add-new-materials`}
                            data-testid="add-new-materials"
                            variant="link"
                            size="sm"
                            onClick={() => onAddMaterials(productId)}
                        >
                            {$t(`${i18nPrefix}.addNewMaterials`)}
                        </Button>
                    )}
                </div>
            </div>
            <div className={`${className}-body`}>
                <MarketingBlurbTable
                    editable={editable}
                    marketingProgramInfosState={marketingProgramInfosState}
                    onView={onView}
                    onEdit={onEdit}
                />
            </div>
        </div>
    );
};

export default MarketingBlurb;