import { Alert, Radio } from '@theorchard/suite-components';
import { formatMessage } from '@theorchard/suite-frontend';
import React, { useState } from 'react';
import type { FC } from 'react';

export interface MarketingPriorityLevelPickerProps {
    editable: boolean;
    projectProductCount: number;
    isProjectLevel: boolean | null;
    handleProjectLevelChange: (isProjectLevel: boolean | null) => void;
}

export const MarketingPriorityLevelPicker: FC<
    MarketingPriorityLevelPickerProps
> = ({
    editable,
    projectProductCount,
    isProjectLevel,
    handleProjectLevelChange,
}) => {
    const className = 'MarketingPriorityLevelPicker';
    const i18nPrefix = 'marketingSection.marketingPriorityLevelPicker';

    const [showProjectLevelWarning, setShowProjectLevelWarning] =
        useState<boolean>(false);

    const handleProductLevelClick = () => {
        editable &&
            handleProjectLevelChange(
                isProjectLevel || isProjectLevel === null ? false : null
            );
    };
    const handleProjectLevelClick = () => {
        if (editable) {
            handleProjectLevelChange(isProjectLevel ? null : true);
            setShowProjectLevelWarning(true);
        }
    };

    return (
        <div className={className}>
            <div className={`${className}-header`}>
                <div className={`${className}-title`}>
                    {$t(`${i18nPrefix}.title`)}
                </div>
            </div>
            <div className={`${className}-body`}>
                <div className={`${className}-project-level`}>
                    <Radio
                        readOnly
                        data-testid="project-level-radio-button"
                        className={`${className}-project-level-radio`}
                        disabled={!editable}
                        checked={!!isProjectLevel && isProjectLevel !== null}
                        onClick={handleProjectLevelClick}
                        label={
                            <label
                                title=""
                                className="form-check-label"
                                onClick={handleProjectLevelClick}
                            >
                                <div
                                    className={`${className}-project-level-label`}
                                >
                                    {$t(`${i18nPrefix}.projectLevelLabel`)}
                                </div>
                                <div
                                    className={`${className}-project-level-description`}
                                >
                                    {$t(
                                        `${i18nPrefix}.projectLevelDescription`
                                    )}
                                </div>
                            </label>
                        }
                    />
                </div>
                {isProjectLevel && showProjectLevelWarning && (
                    <Alert
                        className={`${className}-project-level-warning`}
                        variant="warn"
                        text={formatMessage(
                            projectProductCount === 1
                                ? `${i18nPrefix}.projectLevelWarningZero`
                                : `${i18nPrefix}.projectLevelWarning`,
                            {
                                count: projectProductCount - 1,
                            }
                        )}
                    />
                )}
                <div className={`${className}-product-level`}>
                    <Radio
                        readOnly
                        data-testid="product-level-radio-button"
                        className={`${className}-product-level-radio`}
                        disabled={!editable}
                        checked={!isProjectLevel && isProjectLevel !== null}
                        onClick={handleProductLevelClick}
                        label={
                            <label
                                title=""
                                className="form-check-label"
                                onClick={handleProductLevelClick}
                            >
                                <div
                                    className={`${className}-product-level-label`}
                                >
                                    {$t(`${i18nPrefix}.productLevelLabel`)}
                                </div>
                                <div
                                    className={`${className}-product-level-description`}
                                >
                                    {$t(
                                        `${i18nPrefix}.productLevelDescription`
                                    )}
                                </div>
                            </label>
                        }
                    />
                </div>
            </div>
        </div>
    );
};

export default MarketingPriorityLevelPicker;