import React from 'react';
import { Form, Select } from '@theorchard/suite-components';
import { entries } from 'lodash';
import type { ProductLevelForm } from './types';

interface ProductLevelFormProps {
    formState: ProductLevelForm;
    approvalReasons: Record<string, string>;
    updateForm: (formPatch: Partial<ProductLevelForm>) => void;
    withTitle?: boolean;
}

const CLASS_NAME = 'ProductLevelForm';
const INTL_PREFIX = 'contentReview.productModalApprovalSidecarV2';
const TEST_PREFIX = 'product-approval-form';

const ProductLevelApprovalForm = ({
    formState,
    updateForm,
    approvalReasons,
    withTitle,
}: ProductLevelFormProps) => {
    const approvalReasonOptions =
        entries(approvalReasons)?.map(([cannedResponseId, keyword]) => ({
            value: cannedResponseId,
            label: keyword,
        })) ?? [];

    const handleReasonChange = (
        cannedResponseId: string = '',
        cannedResponseNote: string = ''
    ) =>
        updateForm({
            approvalReason: cannedResponseId,
            approvalReasonNote: cannedResponseNote,
        });

    return (
        <div className={CLASS_NAME}>
            {withTitle && (
                <h4>{$t(`${INTL_PREFIX}.productLevelValidation`)}</h4>
            )}

            <Form.Group className={`${CLASS_NAME}-group`}>
                <Form.Label>{$t(`${INTL_PREFIX}.spotifyWatchlist`)}</Form.Label>
                <Select
                    testId={`${TEST_PREFIX}-reason`}
                    className={`${CLASS_NAME}-reason-select`}
                    options={approvalReasonOptions}
                    placeholder={$t(`${INTL_PREFIX}.selectApprovalReason`)}
                    selectedValue={formState.approvalReason ?? ''}
                    onChange={option =>
                        handleReasonChange(option?.value, option?.label)
                    }
                />
            </Form.Group>

            <Form.Group className={`${CLASS_NAME}-group`}>
                <Form.Label>{$t('common.additionalNotes')}</Form.Label>
                <Form.Control
                    data-testid={`${TEST_PREFIX}-note`}
                    className={`${CLASS_NAME}-note`}
                    value={formState.approvalNote ?? ''}
                    as="textarea"
                    rows={3}
                    placeholder={$t(`${INTL_PREFIX}.notesPlaceholder`)}
                    onChange={({ currentTarget }) =>
                        updateForm({ approvalNote: currentTarget.value })
                    }
                />
            </Form.Group>
        </div>
    );
};

export default ProductLevelApprovalForm;