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 { Dropdown } from 'primereact/dropdown';
import { Accordion, AccordionTab } from 'primereact/accordion';
import { ToggleButton } from 'primereact/togglebutton';

const FormFieldRepeaterFaq = ({
                                  data,
                                  setDataFn,
                                  fieldName,
                                  options = [],
                                  errors,
                                  register,
                                  label,
                                  infoText
                              }) => {
    const [stateFieldData, setStateFieldData] = useState([]);

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

    const selectItem = () => {
        setStateFieldData([...stateFieldData, { id: 0, status: 'new', question: '', answer: '', visible: true }]);
    }

    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 addNewItem = () => {

    }

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

    const editItem = (e, index) => {
        e.stopPropagation();
        console.log('editItem')
    }

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

    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>
            <div className="appForm__faqHeaderControls">
                <Button type="button" iconPos="left" label={__('Aggiungi', 'gepafin')}
                        icon="pi pi-plus" onClick={addNewItem}/>
                <Dropdown onChange={(e) => selectItem(e)}
                          optionDisabled={(opt) => usedExistingValues.includes(opt.value)}
                          options={options} optionLabel="question"/>
            </div>
            <Accordion activeIndex={0}>
                {stateFieldData.map((o, i) => <AccordionTab key={i}
                                                            header={
                                                                <div className="appForm__faqTab">
                                                                    <div className="appForm__faqTabItem">
                                                                        <ToggleButton
                                                                            onIcon="pi pi-eye"
                                                                            offIcon="pi pi-eye-slash"
                                                                            onLabel=""
                                                                            offLabel=""
                                                                            checked={o.visible}
                                                                            onChange={(e) => setChecked(e, i)}/>
                                                                        {o.question}
                                                                    </div>
                                                                    <div className="appForm__faqTabItem">
                                                                        <Button icon="pi pi-pencil" severity="success"
                                                                                aria-label="Edit" onClick={(e) => editItem(e, i)}/>
                                                                        <Button icon="pi pi-times" severity="danger"
                                                                                aria-label="Cancel"
                                                                                onClick={() => removeItem(i)}/>
                                                                    </div>
                                                                </div>
                                                            }
                >
                    <p className="m-0">
                        {o.answer}
                    </p>
                </AccordionTab>)}
            </Accordion>
        </div>
    )
}

export default FormFieldRepeaterFaq;