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

export interface MarketingPriorityInternalNotesProps {
    editable: boolean;
    internalNote: string;
    onInternalNoteChange: (value: string) => void;
}

export const MarketingPriorityInternalNotes: FC<
    MarketingPriorityInternalNotesProps
> = ({ editable, internalNote, onInternalNoteChange }) => {
    const className = 'MarketingPriorityInternalNotes';
    const i18nPrefix = 'marketingSection.marketingPriorityInternalNotes';

    return (
        <div className={className}>
            <div className={`${className}-header`}>
                <div className={`${className}-title`}>
                    {$t(`${i18nPrefix}.title`)}
                </div>
                <Tooltip
                    className={`${className}-tooltip`}
                    id="marketing-priority-internal-notes-tooltip"
                    testId="marketing-priority-internal-notes-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="internal-notes-text-area"
                        as="textarea"
                        rows={4}
                        value={internalNote}
                        disabled={!editable}
                        onChange={e => onInternalNoteChange(e?.target?.value)}
                    />
                ) : (
                    <div className={`${className}-text`}>
                        {internalNote || '-'}
                    </div>
                )}
            </div>
        </div>
    );
};

export default MarketingPriorityInternalNotes;