import { Form, Tooltip } from '@theorchard/suite-components';
import { GlyphIcon } from '@theorchard/suite-icons';
import React from 'react';
import type { FC } from 'react';

export interface GlobalMarketingHighlightsProps {
    editable: boolean;
    globalMarketingHighlights: string;
    setGlobalMarketingHighlights: (value: string) => void;
}

export const GlobalMarketingHighlights: FC<GlobalMarketingHighlightsProps> = ({
    editable,
    globalMarketingHighlights,
    setGlobalMarketingHighlights,
}) => {
    const className = 'GlobalMarketingHighlights';
    const i18nPrefix = 'marketingSection.globalMarketingHighlights';

    return (
        <div className={className} data-testid="project-marketing-highlights">
            <div className={`${className}-header`}>
                <div className={`${className}-title`}>
                    {$t(`${i18nPrefix}.title`)}
                </div>
                <Tooltip
                    className={`${className}-tooltip`}
                    id="global-marketing-highlights-tooltip"
                    testId="global-marketing-highlights-tooltip"
                    message={$t(`${i18nPrefix}.tooltip`)}
                    children={<GlyphIcon name="info" size={16} />}
                />
            </div>
            <div className={`${className}-body`}>
                {editable ? (
                    <Form.Control
                        className={`${className}-text-area`}
                        data-testid="global-marketing-highlights-text-area"
                        as="textarea"
                        rows={12}
                        value={globalMarketingHighlights}
                        onChange={e =>
                            setGlobalMarketingHighlights(e?.target?.value ?? '')
                        }
                    />
                ) : (
                    <div className={`${className}-text`}>
                        {globalMarketingHighlights || '-'}
                    </div>
                )}
                {editable && (
                    <a
                        className={`${className}-guidelines`}
                        target="_blank"
                        rel="noopener noreferrer"
                        href={$t(`${i18nPrefix}.guidelinesUrl`)}
                    >
                        {$t(`${i18nPrefix}.guidelinesText`)}
                    </a>
                )}
            </div>
        </div>
    );
};

export default GlobalMarketingHighlights;