import React from 'react';
import { useField, Form, FormikProps, Formik } from 'formik';
import {
    Input, Select, Textarea, VStack, Checkbox, Box, Text, Divider, Button, useNumberInput,
} from '@chakra-ui/react'
import 'suneditor/dist/css/suneditor.min.css'; // Import Sun Editor's CSS File
import Description from "./description";
import Settings from "./settings";

interface Values {
    title: string;
    lastName: string;
    text: string;
    desc: string;
}

const types = [
    {desc:"текст", value:"text"},
    {desc:"селект", value:"select"},
    {desc:"чекбокс", value:"checkbox"},
    {desc:"файл", value:"file"},
    {desc:"кнопка", value:"button"},
    {desc:"ничего", value:"none"}
]

const TextField = (props: any) => {

    const [field, meta, helpers] = useField(props);

    return (
        <>
            <Textarea resize="none" width="80%" {...field} {...props} />
            {meta.touched && meta.error ? (
                <div className="error">{meta.error}</div>
            ) : null}
        </>
    );
};


export default () => {

    const [type, setType] = React.useState<number>(0)
    const [stockroom, setStockroom] = React.useState<any>([])
    const stockroomHC = (value:Array<object>) => {
        setStockroom([...value])
    }
    const typeHC = (value:number) => {
        console.log(value)
        setType(value)
        setStockroom([])
    }


    return(
        <>
            <Formik
                initialValues={{
                    text: '',
                    title: '',
                    lastName: '',
                    desc:'описание',
                }}

                onSubmit={(values, actions) => {
                    console.log(JSON.stringify(values))
                }}
            >
                {(props: FormikProps<Values>) => (

                    <Form>
                        <VStack>
                            <TextField placeholder="Заголовок" name="title" type="text" />
                            <Description name="desc"/>
                            {
                                type === 0 ? //Тип вопроса - текст?
                                    <TextField name="text" placeholder="текст" type="text" />
                                    :
                                    stockroom.length === 0 ? //В поле для юзерских данных есть что-то?
                                        null //Ничего не внесено
                                        :
                                        type === 1 ? //Тип вопроса - селект?
                                            <Select>
                                                {
                                                    stockroom.map((e: any, i: number) => {
                                                        return <option key={i}>{e.text}</option>
                                                    })
                                                }
                                            </Select>
                                            :
                                            type === 2 ? //Тип вопроса - чекбокс?
                                                stockroom.map((e:any, i:number) => {
                                                    return <Checkbox key={i}>{e.text}</Checkbox>
                                                })
                                                :
                                                type === 3 ? //Тип вопроса - файл?
                                                    <input type="file"/>
                                                    :
                                                    type === 4 ? //Тип вопроса - кнопка?
                                                        stockroom.map((e:any, i:number) => {
                                                            return <Button key={i}>{e.text}</Button>
                                                        })
                                                        :
                                                        null //Тип вопроса - ничего
                            }
                        </VStack>

                        <Settings
                            types={types}
                            stockroomHC={stockroomHC}
                            stockroom={stockroom}
                            typeHC={typeHC}
                            type={type}
                        />
                    </Form>

                )}
            </Formik>
        </>
    )
}