import React from 'react';
import {Input, Select, Stack, Checkbox, Box, Text, Divider } from '@chakra-ui/react'
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import TimePicker from 'react-time-picker';


const statusValues: any = ['draft', 'template', 'stop', 'start']

export default () => {
    const [startDate, setStartDate] = React.useState<any>(null);
    const [value, onChange] = React.useState<string>("");
    return(
        <Box
            padding="20px"
        >
            <Stack
                backgroundColor="lightgray"
                padding="20px"
            >
                <Text>Название опроса (максимум 280 символов)</Text>
                <Input placeholder='name' />
                <Text>Описание опроса</Text>
                <Input placeholder='description' />
                <Input type="hidden" placeholder='config' />
                <Text>Статус опроса</Text>
                <Select defaultValue="draft">
                    {
                        statusValues.map((e:string,i:number)=> {
                            return <option key={i} value={e}>{e}</option>
                        })
                    }
                </Select>
            </Stack>
            <Stack padding="20px">
                <Text>Сохранить устройство</Text>
                <Checkbox/>
                <Divider/>
                <Text>Разрешить пользователям перепроходить опрос</Text>
                <Checkbox/>
                <Divider/>
                <Text>Сохранять статистику неполных прохождений</Text>
                <Checkbox/>
                <Divider/>
                <Text>Уведомлять по почте при каждом прохождении опроса</Text>
                <Checkbox/>
                <Divider/>
                <Text>Сохранять статистику только для уникального прохождения опроса</Text>
                <Checkbox/>
                <Divider/>
            </Stack>
            <Stack
                backgroundColor="lightgray"
                padding="20px"
            >
                <Text>Выбрать время до которого проводится опрос</Text>
                <TimePicker
                    format="HH : mm ss"
                    disableClock={true}
                    amPmAriaLabel={"am"}
                    onChange={(e:any) => onChange(e)}
                    value={value}
                />
                <Text>Разрешить ставить на паузу</Text>
                <Checkbox/>
                <Text>Дата проведения опроса</Text>
                <DatePicker
                    selected={startDate}
                    onChange={(date) => setStartDate(date)}
                    timeInputLabel="Time:"
                    dateFormat="MM/dd/yyyy h:mm aa"
                    showTimeInput
                />
            </Stack>
        </Box>
    )
}