import React, { useState, useEffect, use } from 'react'
import {
    Button,
    FormControl,
    Grid,
    InputLabel,
    Select,
    TextField,
    Typography,
    DialogActions,
    Dialog,
    DialogContent,
    DialogContentText,
    DialogTitle,
    IconButton,
    Icon,
    Tooltip,
    FormControlLabel,
    Checkbox,
} from '@material-ui/core'
import { toast } from 'react-toastify'
import { useTranslation } from 'react-i18next'
import { hideLoading, showLoading } from 'app/redux/actions/loadingAction'
import { connect } from 'react-redux'
import { KeyboardDatePicker } from '@material-ui/pickers'
import { convertDate, getTimeDDMM } from 'app/config/Function'

function FormDialog(props) {
    const { t } = useTranslation()

    const { open, handleClose, data, onAgree } = props

    console.log('data', data)

    const [forever, setForever] = useState(false)

    const [name, setName] = useState()
    const [date, setDate] = useState(addOneYear())
    useEffect(() => {
        if (data && data?.date_expried) {
            if (
                data.date_expried != 'Vô thời hạ' &&
                data.date_expried != 'Vô thời hạn'
            ) {
                setDate(getTimeDDMM(data.date_expried))
            } else {
                setDate(new Date())
            }
        }
    }, [data])

    const handleDateChangeLast = (date) => {
        setDate(date)
    }

    function addOneYear() {
        // Create a new Date object from the provided date
        let newDate = new Date()

        // Add one year to the new date
        newDate.setFullYear(newDate.getFullYear() + 1)

        return newDate
    }

    return (
        <Dialog
            open={open}
            onClose={handleClose}
            aria-labelledby="form-dialog-title"
        >
            <DialogTitle id="form-dialog-title">
                Điều chỉnh thời gian hoạt động
            </DialogTitle>
            <DialogContent>
                <FormControlLabel
                    className="min-w-88"
                    control={
                        <Checkbox
                            size="small"
                            color="primary"
                            onChange={(event) => {
                                setForever(event.target.checked)
                            }}
                            value={forever}
                            checked={forever}
                        />
                    }
                    label="Vô thời hạn"
                />

                {!forever && (
                    <KeyboardDatePicker
                        style={{
                            marginTop: 15,
                        }}
                        placeholder="dd/MM/yyyy"
                        label={'Thời gian hoạt động của cây xăng'}
                        disableToolbar
                        inputVariant={'outlined'}
                        fullWidth
                        minDate={new Date()}
                        clearable={true}
                        format="dd/MM/yyyy"
                        minDateMessage="Thời gian phải lớn hơn ngày hiện tại"
                        invalidDateMessage="Định dạng không hợp lệ"
                        value={date}
                        onChange={handleDateChangeLast}
                        KeyboardButtonProps={{
                            'aria-label': 'change date',
                        }}
                    />
                )}
            </DialogContent>
            <DialogActions>
                <Button color="secondary" onClick={handleClose}>
                    Thoát
                </Button>
                <Button
                    onClick={() => {
                        if (date) {
                            onAgree(forever, date)
                        } else {
                            toast.warning(
                                'Vui lòng nhập thời gian hoạt động của cây xăng!',
                                {
                                    theme: 'colored',
                                }
                            )
                        }
                    }}
                    color="primary"
                >
                    Đồng ý
                </Button>
            </DialogActions>
        </Dialog>
    )
}

const mapStateToProps = (state) => {
    return {}
}
export default connect(mapStateToProps, { showLoading, hideLoading })(
    FormDialog
)
