import React, { useCallback, useMemo } from 'react';
import { __, sprintf } from '@wordpress/i18n';
import { head, pathOr, pluck } from 'ramda';

// components
import { InputText } from 'primereact/inputtext';
import { InputSwitch } from 'primereact/inputswitch';

// store
import { useStoreValue } from '../../../../../../store';

const ElementSettingTableColumnsForCsv = ({ setDataFn }) => {
    const chosenFieldSettings = useStoreValue('chosenFieldSettings');

    const properValue = useMemo(() => {
        let newValue = []

        if (chosenFieldSettings) {
            const setting = head(chosenFieldSettings.filter(o => o.name === 'table_columns'));
            const settingReports = head(chosenFieldSettings.filter(o => o.name === 'reportColumns'));
            const settingData = pathOr([], ['value', 'stateFieldData'], setting);
            const settingReportData = pathOr([], ['value'], settingReports);
            const canBeEnabled = settingData.filter(o => o.predefined).length > 0;
            newValue = settingData.map((o) => {
                const existing = pathOr({}, [], head(settingReportData.filter(s => s.name === o.name)));
                const existingEnabled = pathOr(false, ['enableCsv'], existing);
                return {
                    ...o,
                    ...existing,
                    predefined: o.predefined,
                    enableCsv: !canBeEnabled ? false : existingEnabled
                }
            });
        }

        return newValue;
    }, [chosenFieldSettings]);
    const canBeEnabled = properValue.filter(o => o.predefined).length > 0;

    const onInputChange = useCallback((e, index) => {
        const { value } = e.target;
        const newData = properValue.map((o, i) => {
            if (i === index) {
                o.labelCsv = value;
            }
            return o;
        })

        setDataFn('reportColumns', newData);
    }, [properValue]);

    const setChecked = useCallback((value, index) => {
        const newData = properValue.map((o, i) => {
            if (i === index) {
                o.enableCsv = value;
                //name = o.name;
            }
            return o;
        });

        setDataFn('reportColumns', newData);

        const atLeastOneIsEnabled = pluck('enableCsv', newData).filter(v => v).length > 0;

        if (atLeastOneIsEnabled) {
            setDataFn('reportEnable', true);
        } else {
            setDataFn('reportEnable', false);
        }
    }, [properValue]);

    const properFields = useCallback((item, i) => {
        return <>
            <div>
                <InputText
                    value={item.label}
                    disabled={true}
                    placeholder={sprintf(__('Colonna %d', 'gepafin'), i + 1)}
                    onInput={(e) => onInputChange(e, i)}/>
            </div>
            <div>
                <InputText
                    value={item.labelCsv}
                    disabled={!canBeEnabled}
                    placeholder={item.label}
                    onInput={(e) => onInputChange(e, i)}/>
            </div>
            <div>
                <InputSwitch
                    checked={item.enableCsv}
                    disabled={!canBeEnabled}
                    onChange={(e) => setChecked(e.value, i)}/>
            </div>
        </>
    }, [canBeEnabled]);

    return (
        <>
            {!canBeEnabled
                ? <p>{__('Almeno una colonna deve essere predefinita! ⚠️')}</p> : null}
            <div className="formElementSettings__repeater">
                {properValue.length > 0
                    ? <div className="formElementSettings__repeaterItem tableRowCsv">
                        <div>{__('Colonna', 'gepafin')}</div>
                        <div>{__('Header CSV', 'gepafin')}</div>
                        <div>{__('Abilitato?', 'gepafin')}</div>
                    </div> : null}
                {properValue.map((o, i) => <div key={i} className="formElementSettings__repeaterItem tableRowCsv">
                    {properFields(o, i)}
                </div>)}
            </div>
        </>
    )
}

export default ElementSettingTableColumnsForCsv;