import React, { useState, useEffect } from 'react'
import {
    ValidatorForm,
    TextValidator,
    SelectValidator,
} from 'react-material-ui-form-validator'
import {
    Button,
    Grid,
    MenuItem,
    FormControlLabel,
    Checkbox,
    Typography,
} from '@material-ui/core'
import { createFunction } from 'app/apis/Functions/function'
import { showLoading, hideLoading } from 'app/redux/actions/loadingAction'
import { toast } from 'react-toastify'
import { Breadcrumb, SimpleCard } from 'app/components'
import { Link, useHistory, useLocation } from 'react-router-dom'
import { trimObject, encryString, convertDate } from 'app/config/Function'
import { connect } from 'react-redux'
import { KeyboardDatePicker } from '@material-ui/pickers'
import {
    dropdownDepartment,
    dropdownUserGroup,
    dropdownStore,
} from 'app/apis/Functions/dropdown'
import PickerImage from 'app/components/Input/PickerImage'
import { createSupplier } from 'app/apis/Functions/supplier'
import { useTranslation } from 'react-i18next'
import useAuth from 'app/hooks/useAuth'
const SimpleForm = (props) => {
    const [state, setState] = useState({})

    const [listDrop, setListDrop] = useState([])
    const [listAction, setListAction] = useState([])

    const { user } = useAuth()

    const { t } = useTranslation()

    const history = useHistory()

    const handleSubmit = async (event) => {
        const newValue = trimObject(state)
        props.showLoading()
        const res = await createSupplier({
            ...newValue,
            type: 0,
            status: 1,
        })
        console.log(res)
        props.hideLoading()
        if (res.data.code == 200) {
            history.push('/payment-supplier')
            if (res.data.code == 200) {
                toast.success('Tạo nhà đối tác thanh toán thành công!', {
                    theme: 'colored',
                })
            }
        } else {
            toast.error(t(res.data.error), {
                theme: 'colored',
            })
        }
    }

    const handleChange = (event) => {
        event.persist()
        setState({
            ...state,
            [event.target.name]: event.target.value,
        })
    }

    const { provider_code, provider_name, phone, email, address } = state
    return (
        <div className="m-sm-30">
            <div className="mb-sm-30">
                <div className="mb-sm-30">
                    <Breadcrumb
                        routeSegments={[
                            {
                                name: 'Đối tác thanh toán',
                                path: '/payment-supplier',
                            },
                            { name: 'Thêm mới' },
                        ]}
                    />
                </div>
                <SimpleCard>
                    <ValidatorForm onSubmit={handleSubmit} onError={() => null}>
                        <Grid container spacing={3}>
                            <Grid item lg={6} md={6} sm={12} xs={12}>
                                <TextValidator
                                    variant="outlined"
                                    className="mb-4 w-full"
                                    label="Mã đối tác *"
                                    onChange={handleChange}
                                    type="text"
                                    name="provider_code"
                                    value={provider_code || ''}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                />
                            </Grid>
                            <Grid item lg={6} md={6} sm={12} xs={12}>
                                <TextValidator
                                    variant="outlined"
                                    className="mb-4 w-full"
                                    label="Tên đối tác *"
                                    onChange={handleChange}
                                    type="text"
                                    name="provider_name"
                                    value={provider_name || ''}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                />
                            </Grid>
                            <Grid item lg={6} md={6} sm={12} xs={12}>
                                <TextValidator
                                    variant="outlined"
                                    className="mb-4 w-full"
                                    label="Số điện thoại *"
                                    onChange={handleChange}
                                    type="text"
                                    name="phone"
                                    value={phone || ''}
                                    validators={[
                                        'required',
                                        'isNumber',
                                        'minStringLength:10',
                                        'maxStringLength:15',
                                    ]}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                        'Trường này phải nhập số ',
                                        'Số điện thoại phải có ít nhất 10 chữ số',
                                        'Số điện thoại nhiều nhất chỉ có 15 chữ số',
                                    ]}
                                />
                            </Grid>
                            <Grid item lg={6} md={6} sm={12} xs={12}>
                                <TextValidator
                                    variant="outlined"
                                    className="mb-4 w-full"
                                    label="Email *"
                                    onChange={handleChange}
                                    type="text"
                                    name="email"
                                    value={email || ''}
                                    validators={['required', 'isEmail']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                        'Email không hợp lệ',
                                    ]}
                                />
                            </Grid>

                            <Grid item lg={6} md={6} sm={12} xs={12}>
                                <TextValidator
                                    variant="outlined"
                                    className="mb-4 w-full"
                                    label="Địa chỉ"
                                    onChange={handleChange}
                                    type="text"
                                    name="address"
                                    value={address || ''}
                                />
                            </Grid>
                        </Grid>
                        <Grid container justify={'flex-end'}>
                            <Link to="/payment-supplier">
                                <Button
                                    style={{
                                        marginRight: 20,
                                    }}
                                    color="inherit"
                                    variant="contained"
                                    onClick={() => {}}
                                >
                                    <span className="capitalize">Quay lại</span>
                                </Button>
                            </Link>
                            <Button
                                color="primary"
                                variant="contained"
                                type="submit"
                            >
                                <span className="capitalize">Thêm mới</span>
                            </Button>
                        </Grid>
                    </ValidatorForm>
                </SimpleCard>
            </div>
        </div>
    )
}

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