import React, { useRef, useEffect, useState } from 'react';
import { classNames } from 'primereact/utils';
import { __ } from '@wordpress/i18n';
import { InputText } from 'primereact/inputtext';
import { Button } from 'primereact/button';
import { Menu } from 'primereact/menu';
import { Dropdown } from 'primereact/dropdown';

const FormFieldRepeater = ({
                               data,
                               setDataFn,
                               fieldName,
                               options = [],
                               errors,
                               register,
                               label,
                               infoText
                           }) => {
    const forMenu = useRef(null);
    const [stateFieldData, setStateFieldData] = useState([]);
    const menuItems = [
        {
            type: 'existing',
            label: __('Esistente', 'gepafin'),
            command: (data) => {
                setStateFieldData([...stateFieldData, {id: null, value: '', status: data.item.type}]);
            }
        },
        {
            type: 'new',
            label: __('Nuovo', 'gepafin'),
            command: (data) => {
                setStateFieldData([...stateFieldData, {id: null, value: '', status: data.item.type}]);
            }
        }
    ]

    const removeItem = (index) => {
        const newData = stateFieldData.toSpliced(index, 1);
        setStateFieldData(newData);
    }

    const selectItem = (e, index) => {
        const newData = stateFieldData.map((o, i) => {
            if (i === index) {
                o.value = e.value;
            }
            return o;
        })
        setStateFieldData(newData);
    }

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

    const properField = (item, i) => {
        return item.status === 'new'
            ? <InputText value={item.value} onInput={(e) => onInputChange(e, i)}/>
            : <Dropdown value={item.value}
                        onChange={(e) => selectItem(e, i)}
                        optionDisabled={(opt) => usedExistingValues.includes(opt.value)}
                        options={options} optionLabel="value"/>
    }

    const usedExistingValues = stateFieldData
        .filter(o => o.status === 'existing')
        .map(o => o.value);

    useEffect(() => {
        const storeFieldData = data[fieldName] ?? [];
        const newData = storeFieldData.map(o => ({...o, status: o.id ? 'existing' : 'new'}))
        setStateFieldData(newData);
        register(fieldName)
    }, [])

    useEffect(() => {
        setDataFn(fieldName, [...stateFieldData]);
    }, [stateFieldData])

    return (
        <div className={classNames(['appForm__field', 'formfieldrepeater'])}>
            <label htmlFor={fieldName} className={classNames({ 'p-error': errors[fieldName] })}>
                {label}
            </label>
            {stateFieldData.map((o, i) => <div key={i} className={classNames('appForm__repeaterItem')}>
                <div className="p-inputgroup flex-1">
                    {properField(o, i)}
                    <Button icon="pi pi-times" className="p-button-danger" onClick={() => removeItem(i)}/>
                </div>
                {o.status === 'new' && infoText ? <small>{infoText}</small> : null}
            </div>)}
            <Menu model={menuItems} popup ref={forMenu} id="aimedForMenu"/>
            <Button type="button" iconPos="right" label={__('Aggiungi', 'gepafin')}
                    icon="pi pi-chevron-down" onClick={(event) => forMenu.current.toggle(event)}
                    aria-controls="aimedForMenu" aria-haspopup/>
        </div>
    )
}

export default FormFieldRepeater;