import React, { useState, useEffect } from 'react'
import {
    ValidatorForm,
    TextValidator,
    SelectValidator,
} from 'react-material-ui-form-validator'
import {
    Button,
    Grid,
    MenuItem,
    Typography,
    IconButton,
    Icon,
    Tooltip,
} from '@material-ui/core'
import _ from 'lodash'
import { detailCustomerCare } from 'app/apis/Functions/request'
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 } from 'app/config/Function'
import { connect } from 'react-redux'
import { dropdownMerchant } from 'app/apis/Functions/dropdown'
import Table from '@material-ui/core/Table'
import TableBody from '@material-ui/core/TableBody'
import TableCell from '@material-ui/core/TableCell'
import TableContainer from '@material-ui/core/TableContainer'
import TableHead from '@material-ui/core/TableHead'
import TableRow from '@material-ui/core/TableRow'
import Paper from '@material-ui/core/Paper'
import CreateField from 'app/components/dialog/CreateField'
import CreateFountain from 'app/components/dialog/CreateFountain'
import UpdateFountain from 'app/components/dialog/UpdateFountain'
import { useTranslation } from 'react-i18next'

const SimpleForm = (props) => {
    const [state, setState] = useState({})
    const history = useHistory()
    const [listDrop, setListDrop] = useState([])
    const [openCreate, setOpenCreate] = useState(false)
    const [listField, setListField] = useState([])
    const [fountainSelected, setFountainSelected] = useState()
    const [openUpdate, setOpenUpdate] = useState()
    const location = useLocation()
    const { t } = useTranslation()
    useEffect(() => {
        getDateDetail()
    }, [])

    const getDateDetail = async () => {
        props.showLoading()
        const res = await detailCustomerCare(location.state, {})
        props.hideLoading()
        if (res.data.code == 200 && res.data.data) {
            console.log(res.data.data.gas_fields)
            if (res.data.data.gas_fields) {
                setListField(res.data.data?.gas_fields)
            }
            setState(res.data.data)
        } else if (res.data.code == 401) {
            setTimeout(() => {
                history.push('/')
            }, 100)
        } else {
            toast.error(t(res.data.error), {
                theme: 'colored',
            })
        }
    }

    const handleSubmit = async (event) => {}

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

    const {
        cus_name,
        phone,
        email,
        tax,
        company_name,
        city,
        package_invoice,
        list_store,
    } = state

    return (
        <div className="m-sm-30">
            <div className="mb-sm-30">
                <div className="mb-sm-30">
                    <Breadcrumb
                        routeSegments={[
                            {
                                name: 'Yêu cầu dùng thử',
                                path: '/gas-station',
                            },
                            { name: 'Chi tiết yêu cầu' },
                        ]}
                    />
                </div>
                <SimpleCard>
                    <ValidatorForm
                        id="form-create"
                        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"
                                    disabled={true}
                                    label="Tên công ty"
                                    onChange={handleChange}
                                    type="text"
                                    name="company_name"
                                    value={company_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"
                                    disabled={true}
                                    label="Mã số thuế"
                                    onChange={handleChange}
                                    type="text"
                                    name="tax"
                                    value={tax || ''}
                                    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"
                                    disabled={true}
                                    label="Số điện thoại"
                                    onChange={handleChange}
                                    type="text"
                                    name="phone"
                                    value={phone || ''}
                                    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"
                                    disabled={true}
                                    label="Email"
                                    onChange={handleChange}
                                    type="text"
                                    name="email"
                                    value={email || ''}
                                    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"
                                    disabled={true}
                                    label="Gói dịch vụ hoá đơn"
                                    onChange={handleChange}
                                    type="text"
                                    name="package_invoice"
                                    value={package_invoice || ''}
                                    validators={['required']}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                    ]}
                                />
                            </Grid>
                            <Grid item lg={12} md={12} sm={12} xs={12}>
                                {list_store?.map((e) => {
                                    return (
                                        <div
                                            style={{
                                                borderRadius: 5,
                                                padding: 10,
                                                marginBottom: 20,
                                                border: '1px solid #346D5F',
                                                paddingBottom: 20,
                                            }}
                                        >
                                            <Typography variant="h6">
                                                {e?.store_name}
                                            </Typography>
                                            <Typography
                                                style={{
                                                    marginBottom: 10,
                                                }}
                                            >
                                                Địa chỉ:{e?.address}
                                            </Typography>

                                            <TableContainer component={Paper}>
                                                <Table aria-label="simple table">
                                                    <TableHead>
                                                        <TableRow
                                                            style={{
                                                                backgroundColor:
                                                                    '#F3F3F3',
                                                            }}
                                                        >
                                                            <TableCell
                                                                style={{
                                                                    borderRight:
                                                                        '0.05px solid #e0e0e0',
                                                                    width: 100,
                                                                }}
                                                                align="center"
                                                            >
                                                                STT
                                                            </TableCell>
                                                            <TableCell
                                                                style={{
                                                                    borderRight:
                                                                        '0.05px solid #e0e0e0',
                                                                }}
                                                                align="center"
                                                            >
                                                                Loại bộ số
                                                            </TableCell>
                                                            <TableCell
                                                                style={{
                                                                    borderRight:
                                                                        '0.05px solid #e0e0e0',
                                                                }}
                                                                align="center"
                                                            >
                                                                Số lượng vòi
                                                            </TableCell>
                                                        </TableRow>
                                                    </TableHead>
                                                    <TableBody>
                                                        {e?.devices_main.map(
                                                            (row, index) => (
                                                                <TableRow
                                                                    key={
                                                                        row.name
                                                                    }
                                                                >
                                                                    <TableCell
                                                                        component="th"
                                                                        scope="row"
                                                                        style={{
                                                                            borderRight:
                                                                                '0.05px solid #e0e0e0',
                                                                        }}
                                                                        align="center"
                                                                    >
                                                                        {index +
                                                                            1}
                                                                    </TableCell>
                                                                    <TableCell
                                                                        style={{
                                                                            borderRight:
                                                                                '0.05px solid #e0e0e0',
                                                                        }}
                                                                        align="center"
                                                                    >
                                                                        {
                                                                            row?.device_main
                                                                        }
                                                                    </TableCell>
                                                                    <TableCell
                                                                        style={{
                                                                            borderRight:
                                                                                '0.05px solid #e0e0e0',
                                                                        }}
                                                                        align="center"
                                                                    >
                                                                        {
                                                                            row?.gasoline_quantity
                                                                        }
                                                                    </TableCell>
                                                                </TableRow>
                                                            )
                                                        )}
                                                    </TableBody>
                                                </Table>
                                            </TableContainer>
                                        </div>
                                    )
                                })}
                            </Grid>
                        </Grid>
                        <Grid
                            style={{
                                marginTop: 40,
                            }}
                            container
                            justify={'flex-end'}
                        >
                            <Link to="gas-station">
                                <Button
                                    style={{
                                        marginRight: 20,
                                    }}
                                    color="inherit"
                                    variant="contained"
                                    onClick={() => {}}
                                >
                                    <span className="capitalize">Quay lại</span>
                                </Button>
                                <Link
                                    to={{
                                        pathname: '/merchant/create',
                                        state: {
                                            phone,
                                            email,
                                            tax,
                                            company_name,
                                            city,
                                        },
                                    }}
                                >
                                    <Button
                                        style={{
                                            marginRight: 20,
                                        }}
                                        color="primary"
                                        variant="contained"
                                    >
                                        <span className="capitalize">
                                            Thêm mới pháp nhân
                                        </span>
                                    </Button>
                                </Link>

                                {/* <Button
                                    onClick={() => {
                                        
                                        history.push({
                                            pathname: '/merchant',
                                            data: {
                                                phone,
                                                email,
                                                tax,
                                                company_name,
                                                city,
                                            },
                                        })
                                    }}
                                    color="primary"
                                    variant="contained"
                                >
                                    <span className="capitalize">
                                        Thêm mới pháp nhân
                                    </span>
                                </Button> */}
                            </Link>
                        </Grid>
                    </ValidatorForm>
                </SimpleCard>
            </div>
        </div>
    )
}

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