import React, { useState, useEffect, useRef } from 'react';
import { __ } from '@wordpress/i18n';
import { useNavigate, useParams } from 'react-router-dom';

// components
import getBandoLabel from '../../helpers/getBandoLabel';
import { Button } from 'primereact/button';
import { Skeleton } from 'primereact/skeleton';
import { Steps } from 'primereact/steps';
import BandoEditFormStep1 from './components/BandoEditFormStep1';
import BandoEditFormStep2 from './components/BandoEditFormStep2';
import { Messages } from 'primereact/messages';
import { is, isNil } from 'ramda';

const BandoEdit = () => {
    const navigate = useNavigate();
    const { id } = useParams();
    const [activeStep, setActiveStep] = useState(0)
    const [data, setData] = useState({});
    const [isLoading, setIsLoading] = useState(true);
    const [selectedTemplate, setSelectedTemplate] = useState(null);
    const [templates, setTemplate] = useState(null);
    const formRef = useRef(null);
    const stepErrorMsgs = useRef(null);

    const stepItems = [
        {
            label: __('Testi', 'gepafin'),
            command: () => {
                if (activeStep === 0) {
                    return false
                }
                stepErrorMsgs.current.clear();
                if (formRef.current.isFormValid()) {
                    goToStep(0)
                } else {
                    stepErrorMsgs.current.show([
                        { sticky: true, severity: 'error', summary: 'Error',
                            detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
                            closable: true }
                    ]);
                }
            }
        },
        {
            label: __('Gestione', 'gepafin'),
            command: () => {
                if (activeStep === 1) {
                    return false
                }
                stepErrorMsgs.current.clear();
                const isFormValid = formRef.current.isFormValid();
                console.log('before go to step 1:', isFormValid)
                if (isFormValid) {
                    goToStep(1);
                } else {
                    stepErrorMsgs.current.show([
                        { sticky: true, severity: 'error', summary: 'Error',
                            detail: __('Potrai andare su altro step dopo risolvere errori della forma', 'gepafin'),
                            closable: true }
                    ]);
                }
            }
        }
    ];

    const goToStep = (step) => {
        setActiveStep(step);
    }

    const openBandoFormManagement = () => {
        navigate('/bandi/11/forms');
    }

    useEffect(() => {
        const parsed = parseInt(id)
        const bandoId = !isNaN(parsed) ? parsed : 0;

        const data = 0 === bandoId
            ? {
                status: 'draft',
                name: ''
            }
            : {
                "name": "Innovazione digitale 2024",
                "confidi": false,
                "descriptionShort": "Supporto alle PMI per progetti di digitalizzazione e innovazione tecnologica.",
                "descriptionLong": "Il bando \"Innovazione Digitale 2024\" mira a sostenere le PMI nell'adozione di tecnologie digitali innovative. I progetti finanziabili includono l'implementazione di soluzioni di intelligenza artificiale, blockchain, IoT, e altre tecnologie avanzate che possono migliorare la competitività delle imprese.",
                "documentationRequested": "Documentazione richiesta*",
                "dates": [
                    "2024-08-27T22:00:00.000Z",
                    "2024-10-29T23:00:00.000Z"
                ],
                "amount": 0,
                "amountMax": 0,
                "aimedTo": [
                    {
                        "id": 3,
                        "value": "PMI con sede in Umbria",
                        "status": "existing"
                    }
                ],
                "faq": [
                    {
                        "id": 2,
                        "question": "Question 1?",
                        "answer": "Lorem ipsum dolor",
                        "visible": true,
                        "status": "existing"
                    }
                ],
                "documentation": [
                    /*{
                        createdDate: "2024-08-23T12:40:47.700350791",
                        description: null,
                        filePath: "https://mementoresources.s3.eu-west-1.amazonaws.com/gepafin/SCR-20240820-kiwn.pdf",
                        id: 10,
                        name: "SCR-20240820-kiwn.pdf",
                        updatedDate: "2024-08-23T12:40:47.700373894"
                    }*/
                ],
                status: 'draft',
                id: 11
            }

            if (bandoId === 0) {
                setData(data);
                setIsLoading(false);
            } else {
                setTimeout(() => {
                    if (!isNil(data.dates) && data.dates.length) {
                        data.dates = data.dates.map(v => is(String, v) ? new Date(v) : v);
                    }

                    setData(data);

                    const templates = [
                        { name: 'Il mio template', value: 22 },
                        { name: 'Template #11', value: 11 },
                    ];
                    setTemplate(templates);
                    setIsLoading(false);
                }, 2000);
            }
    }, [id]);

    return (
        <div className="appPage">
            <div className="appPage__pageHeader">
                <h1>{__('Creazione/Modifica Bando', 'gepafin')}</h1>
                <p>
                    {__('Stato:', 'gepafin')}
                    <span>{getBandoLabel(data.status)}</span>
                </p>
            </div>

            <div className="appPage__spacer"></div>

            {/*!isLoading
                ? <div className="pageBando__templateSelection">
                    <div className="appForm__field">
                        <label htmlFor="template">
                            {__('Usa Template Salvato', 'gepafin')}
                        </label>
                        <Dropdown
                            id="template"
                            value={selectedTemplate}
                            onChange={(e) => setSelectedTemplate(e.value)}
                            options={templates}
                            optionLabel="name"
                            placeholder={__('Seleziona template', 'gepafin')}/>
                    </div>
                    <Button
                        onClick={() => console.log('use template')}
                        label={__('Applica', 'gepafin')}
                        icon="pi pi-check"
                        iconPos="right"/>
                </div> : null*/}
            {!isLoading
                ? <Steps
                    model={stepItems}
                    activeIndex={activeStep}
                    readOnly={false}/>
                : null}

            <div className="appPage__spacer"></div>

            <Messages ref={stepErrorMsgs} />

            {!isLoading
                ? <>
                    {activeStep === 0
                        ? <BandoEditFormStep1 initialData={data} ref={formRef}/>
                        : <BandoEditFormStep2 initialData={data} ref={formRef}/>}

                    <div className="appPageSection">
                        <h2>{__('Crea o modifica il Form compilabile dal Beneficiario', 'gepafin')}</h2>
                        <Button
                            type="button"
                            onClick={openBandoFormManagement}
                            label={__('Crea/modifica form', 'gepafin')}/>
                    </div>
                </>
                : <>
                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
                    <Skeleton width="100%" height="4rem" className="mb-8"></Skeleton>
                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
                    <Skeleton width="100%" height="2rem" className="mb-8"></Skeleton>
                    <Skeleton width="20%" height="1rem" className="mb-2"></Skeleton>
                    <Skeleton width="100%" height="4rem"></Skeleton>
                </>}
        </div>
    )
}

export default BandoEdit;