import React from 'react';

import {FormRow} from '@gravity-ui/components';
import type {SelectOption} from '@gravity-ui/uikit';
import {Dialog, Select, Text} from '@gravity-ui/uikit';
import block from 'bem-cn-lite';
import {I18n} from 'i18n';
import {ChartkitMenuDialogsQA, EXPORT_FORMATS, type ExportParams} from 'shared';

import './DownloadCsv.scss';

const b = block('download-csv-modal');

const i18n = I18n.keyset('chartkit.menu.download-dialog');

type DownloadCsvProps = {
    onSubmit: (params: ExportParams) => void;
    loading?: boolean;
    onClose: () => void;
    footerContent?: React.ReactNode;
    chartType?: string;
    path?: string;
    additionalControls?: React.ReactNode;
    showWarning?: boolean;
    showHint?: boolean;
    className?: string;
};

const valueDelimiterOptions: SelectOption[] = [
    {
        value: ';',
        qa: ChartkitMenuDialogsQA.chartMenuExportCsvValueDelimiterSemicolon,
        content: `${i18n('value_semicolon')}`,
    },
    {
        value: ',',
        qa: ChartkitMenuDialogsQA.chartMenuExportCsvValueDelimiterComma,
        content: `${i18n('value_comma')}`,
    },
    {
        value: 'tab',
        qa: ChartkitMenuDialogsQA.chartMenuExportCsvValueDelimiterTab,
        content: i18n('value_tab'),
    },
    {
        value: 'space',
        qa: ChartkitMenuDialogsQA.chartMenuExportCsvValueDelimiterSpace,
        content: i18n('value_space'),
    },
];

const decimalDelimiterOptions: SelectOption[] = [
    {
        value: '.',
        qa: ChartkitMenuDialogsQA.chartMenuExportCsvDecimalDelimiterDot,
        content: i18n('value_dot'),
    },
    {
        value: ',',
        qa: ChartkitMenuDialogsQA.chartMenuExportCsvDecimalDelimiterComma,
        content: i18n('value_comma'),
    },
];

const encodingOptions = [
    {
        value: 'utf8',
        content: 'utf8',
    },
    {
        value: 'cp1251',
        content: 'cp1251',
    },
];

export const DownloadCsv = ({
    onSubmit,
    loading,
    onClose,
    footerContent,
    additionalControls,
    className,
    showHint = true,
}: DownloadCsvProps) => {
    const [delValue, setDelValue] = React.useState(';');
    const [delNumber, setDelNumber] = React.useState('.');
    const [encoding, setEncoding] = React.useState('utf8');

    const downloadCsv = React.useCallback(() => {
        const params = {
            format: EXPORT_FORMATS.CSV,
            delValues: delValue,
            delNumbers: delNumber,
            encoding,
        };

        onSubmit(params);
    }, [delNumber, delValue, encoding, onSubmit]);

    return (
        <Dialog
            open={true}
            onClose={onClose}
            className={b(null, className)}
            qa={ChartkitMenuDialogsQA.chartMenuExportCsvDialog}
        >
            <Dialog.Header caption={i18n('label_title-csv')} />
            <Dialog.Body className={b('content')}>
                {additionalControls}
                <FormRow label={i18n('label_values-delimiter')} className={b('row')}>
                    <Select
                        width="max"
                        qa={ChartkitMenuDialogsQA.chartMenuExportCsvSelectDelimiter}
                        value={[delValue]}
                        options={valueDelimiterOptions}
                        onUpdate={(delValues) => setDelValue(delValues[0])}
                    />
                </FormRow>
                <FormRow label={i18n('label_decimal-delimiter')} className={b('row')}>
                    <Select
                        width="max"
                        qa={ChartkitMenuDialogsQA.chartMenuExportCsvSelectFloat}
                        value={[delNumber]}
                        options={decimalDelimiterOptions}
                        onUpdate={(delNumbers) => setDelNumber(delNumbers[0])}
                    />
                </FormRow>
                <FormRow label={i18n('label_encoding')} className={b('row')}>
                    <Select
                        width="max"
                        qa={ChartkitMenuDialogsQA.chartMenuExportCsvSelectCharset}
                        value={[encoding]}
                        options={encodingOptions}
                        onUpdate={(encodingVal) => setEncoding(encodingVal[0])}
                    />
                </FormRow>
                {showHint && (
                    <Text variant="body-1" color="hint">
                        {i18n('label_hint')}
                    </Text>
                )}
            </Dialog.Body>
            <Dialog.Footer
                onClickButtonCancel={onClose}
                onClickButtonApply={downloadCsv}
                propsButtonApply={{
                    loading,
                    qa: ChartkitMenuDialogsQA.chartMenuExportModalApplyBtn,
                }}
                textButtonApply={i18n('button_download')}
                textButtonCancel={i18n('button_cancel')}
            >
                {footerContent}
            </Dialog.Footer>
        </Dialog>
    );
};
