import React, { useState, useEffect } from 'react'
import {
    ValidatorForm,
    TextValidator,
    SelectValidator,
} from 'react-material-ui-form-validator'
import {
    Button,
    Grid,
    MenuItem,
    FormControlLabel,
    Checkbox,
    Typography,
    TextField,
    Icon,
    Card,
} 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'
import ListTrans from './ListTrans/Index'

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: '3',
            status: 1,
        })

        props.hideLoading()
        if (res.data.code == 200) {
            history.push('/reconciliation/sheet')
            if (res.data.code == 200) {
                toast.success('Tạo nhà cung cấp thiết bị 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: 'Cấu hình đối soát',
                                path: '/reconciliation/sheet',
                            },
                            { name: 'Chi tiết' },
                        ]}
                    />
                </div>
                <SimpleCard>
                    <ValidatorForm onSubmit={handleSubmit} onError={() => null}>
                        <Grid container spacing={3} alignItems="center">
                            <Grid item lg={6} md={6} sm={12} xs={12}>
                                <Typography variant="h6">
                                    Xem phiếu đối soát
                                </Typography>
                            </Grid>
                            <Grid
                                item
                                lg={6}
                                md={6}
                                sm={12}
                                xs={12}
                                container
                                justify={'flex-end'}
                                style={{
                                    paddingRight: 30,
                                }}
                            >
                                <Link to="/reconciliation/sheet">
                                    <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">Đối soát</span>
                                </Button>
                            </Grid>
                            <Grid
                                item
                                lg={12}
                                md={12}
                                sm={12}
                                xs={12}
                                container
                                spacing={2}
                            >
                                <Grid item lg={4} md={4} sm={6} xs={6}>
                                    <Card
                                        style={{
                                            padding: 10,
                                        }}
                                        elevation={6}
                                    >
                                        <Typography
                                            style={{
                                                color: '#344054',
                                                fontSize: 14,
                                            }}
                                        >
                                            Mã phiếu đối soát
                                        </Typography>
                                        <Typography
                                            style={{
                                                color: '#000000',
                                                fontSize: 16,
                                                marginBottom: 10,
                                            }}
                                        >
                                            hêhh
                                        </Typography>

                                        <Typography
                                            style={{
                                                color: '#344054',
                                                fontSize: 14,
                                            }}
                                        >
                                            Đối tác
                                        </Typography>
                                        <Typography
                                            style={{
                                                color: '#000000',
                                                fontSize: 16,
                                                marginBottom: 10,
                                            }}
                                        >
                                            hêhh
                                        </Typography>

                                        <Typography
                                            style={{
                                                color: '#344054',
                                                fontSize: 14,
                                            }}
                                        >
                                            Người tạo
                                        </Typography>
                                        <Typography
                                            style={{
                                                color: '#000000',
                                                fontSize: 14,
                                            }}
                                        >
                                            hêhh
                                        </Typography>
                                    </Card>
                                </Grid>
                                <Grid item lg={4} md={4} sm={6} xs={6}>
                                    <Card
                                        style={{
                                            padding: 10,
                                        }}
                                        elevation={6}
                                    >
                                        <Typography
                                            style={{
                                                color: '#344054',
                                                fontSize: 14,
                                            }}
                                        >
                                            Ngày tạo
                                        </Typography>
                                        <Typography
                                            style={{
                                                color: '#000000',
                                                fontSize: 16,
                                                marginBottom: 10,
                                            }}
                                        >
                                            hêhh
                                        </Typography>

                                        <Typography
                                            style={{
                                                color: '#344054',
                                                fontSize: 14,
                                            }}
                                        >
                                            Ngày cập nhật
                                        </Typography>
                                        <Typography
                                            style={{
                                                color: '#000000',
                                                fontSize: 16,
                                                marginBottom: 10,
                                            }}
                                        >
                                            hêhh
                                        </Typography>

                                        <Typography
                                            style={{
                                                color: '#344054',
                                                fontSize: 14,
                                            }}
                                        >
                                            Ngày đối soát
                                        </Typography>
                                        <Typography
                                            style={{
                                                color: '#000000',
                                                fontSize: 14,
                                            }}
                                        >
                                            hêhh
                                        </Typography>
                                    </Card>
                                </Grid>
                                <Grid item lg={4} md={4} sm={6} xs={6}>
                                    <Card
                                        style={{
                                            padding: 10,
                                        }}
                                        elevation={6}
                                    >
                                        <Typography
                                            style={{
                                                color: '#344054',
                                                fontSize: 14,
                                            }}
                                        >
                                            Ghi chú
                                        </Typography>
                                        <Typography
                                            style={{
                                                color: '#000000',
                                                fontSize: 16,

                                                height: 130,
                                            }}
                                        >
                                            Phải có ít nhất một bồn bể!Phải có
                                            ít nhất một bồn bể!Phải có ít nhất
                                            một bồn bể!Phải có ít nhất một bồn
                                        </Typography>
                                    </Card>
                                </Grid>
                            </Grid>

                            <Grid
                                item
                                lg={12}
                                md={12}
                                sm={12}
                                xs={12}
                                container
                                spacing={2}
                            >
                                <ListTrans isDetail={true} />
                            </Grid>
                        </Grid>
                    </ValidatorForm>
                </SimpleCard>
            </div>
        </div>
    )
}

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