import React, { useState, useEffect } from 'react'
import {
    ValidatorForm,
    TextValidator,
    SelectValidator,
} from 'react-material-ui-form-validator'
import {
    Button,
    Grid,
    FormControlLabel,
    Checkbox,
    Typography,
    MenuItem,
    Tooltip,
    Switch,
} from '@material-ui/core'
import { dropdownListSupplier } from 'app/apis/Functions/dropdown'
import { createMerchant } from 'app/apis/Functions/merchant'
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 { useTranslation } from 'react-i18next'

const SimpleForm = (props) => {
    const [state, setState] = useState({})
    const history = useHistory()
    const [isStore, setIsStore] = useState(false)
    const [invoice, setInvoice] = useState(false)
    const [payment, setPayment] = useState(false)
    const [isAuto, setAuto] = useState(false)
    const [isInvoiceAuto, setInvoiceAuto] = useState(false)

    const [listDrop, setListDrop] = useState([])
    const { t } = useTranslation()
    const location = useLocation()

    console.log('location.state', location.state)

    useEffect(() => {
        getData()
    }, [])

    useEffect(() => {
        if (location.state) {
            const { company_name, tax, phone, email, city } = location.state

            setState(
                {
                    merchant_name: company_name,
                    tax_code: tax,
                    address: city,
                    email,
                    phone_number: phone,
                },
                []
            )
        }
    }, [])
    const getData = async () => {
        props.showLoading()
        const res = await dropdownListSupplier({})
        props.hideLoading()
        if (res.data.code == 200 && res.data.data) {
            const newList = res.data.data.map((e) => {
                return {
                    ...e,
                    name: e.supplier_name,
                    id: e.supplier_code,
                }
            })

            setListDrop(newList)
        } else if (res.data.code == 401) {
            setTimeout(() => {
                history.push('/')
            }, 100)
        } else {
            toast.error('Lấy giữ liệu thất bại !', {
                theme: 'colored',
            })
        }
    }

    const handleSubmit = async (event) => {
        const newValue = trimObject(state)

        props.showLoading()
        const res = await createMerchant({
            ...newValue,
            is_admin_store: isStore,
            is_connect_hddt: invoice,
            is_connect_qr: payment,
            is_hddt_nomal: isAuto,
            is_invoice_auto: isInvoiceAuto,
        })
        props.hideLoading()
        if (res.data.code == 200) {
            history.push('/merchant')
            if (res.data.code == 200) {
                toast.success('Tạo pháp nhâ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 {
        merchant_name,
        tax_code,
        address,
        email,
        phone_number,
        representative,
        username,
        password,
        hddt_tax_code,
        hddt_username,
        hddt_password,
        hddt_character,
        qr_merchant_code,
        qr_api_key,
        qr_secret_key,
        hddt_sign_code,
        hddt_account,
        hddt_acpass,
        hddt_base_url,
        inv_pattern,
        inv_serial,
        publish_invoce_time,
        supplier_code,
    } = state

    return (
        <div className="m-sm-30">
            <div className="mb-sm-30">
                <div className="mb-sm-30">
                    <Breadcrumb
                        routeSegments={[
                            {
                                name: 'Danh sách pháp nhân',
                                path: '/merchant',
                            },
                            { name: 'Thêm mới pháp nhân' },
                        ]}
                    />
                </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="Tên pháp nhân *"
                                    onChange={handleChange}
                                    type="text"
                                    name="merchant_name"
                                    value={merchant_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="Mã số thuế *"
                                    onChange={handleChange}
                                    type="text"
                                    name="tax_code"
                                    value={tax_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="Địa chỉ *"
                                    onChange={handleChange}
                                    type="text"
                                    name="address"
                                    value={address || ''}
                                    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="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="Tên người đại diện *"
                                    onChange={handleChange}
                                    type="text"
                                    name="representative"
                                    value={representative || ''}
                                    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 liên hệ *"
                                    onChange={handleChange}
                                    type="text"
                                    name="phone_number"
                                    value={phone_number || ''}
                                    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="Tên đăng nhập *"
                                    onChange={handleChange}
                                    type="text"
                                    name="username"
                                    value={username || ''}
                                    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="Mật khẩu *"
                                    onChange={handleChange}
                                    type="password"
                                    name="password"
                                    value={password || ''}
                                    validators={[
                                        'required',
                                        'minStringLength:8',
                                    ]}
                                    errorMessages={[
                                        'Không được để trống trường này',
                                        'Mật khẩu phải có ít nhất 8 ký tự',
                                    ]}
                                />
                            </Grid>
                            <Grid lg={12} md={12} sm={12} xs={12} item>
                                <FormControlLabel
                                    className="min-w-288"
                                    control={
                                        <Checkbox
                                            size="small"
                                            color="primary"
                                            onChange={(event) => {
                                                console.log(
                                                    event.target.checked
                                                )
                                                setIsStore(event.target.checked)
                                            }}
                                            value={isStore}
                                        />
                                    }
                                    label="Pháp nhân là chủ cửa hàng"
                                />
                            </Grid>
                            <Grid lg={12} md={12} sm={12} xs={12} item>
                                <Typography variant="h6">
                                    Thông tin tích hợp
                                </Typography>
                            </Grid>
                            <Grid lg={12} md={12} sm={12} xs={12} item>
                                <FormControlLabel
                                    className="min-w-288"
                                    control={
                                        <Checkbox
                                            size="small"
                                            name={'he1'}
                                            color="primary"
                                            onChange={(event) => {
                                                setInvoice(event.target.checked)
                                            }}
                                            value={invoice}
                                        />
                                    }
                                    label="Tích hợp hóa đơn"
                                />
                            </Grid>
                            {invoice ? (
                                <Grid xs={6} sm={6} item>
                                    <SelectValidator
                                        variant={'outlined'}
                                        label={'Đơn vị cung cấp'}
                                        className="mb-4 w-full"
                                        value={supplier_code || ''}
                                        displayEmpty
                                        name="supplier_code"
                                        onChange={handleChange}
                                    >
                                        {listDrop.map((e) => (
                                            <MenuItem value={e.id}>
                                                {e.name}
                                            </MenuItem>
                                        ))}
                                    </SelectValidator>
                                </Grid>
                            ) : null}

                            {invoice ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="Mã số thuế hoá đơn"
                                        onChange={handleChange}
                                        type="text"
                                        name="hddt_tax_code"
                                        value={hddt_tax_code || ''}
                                    />
                                </Grid>
                            ) : null}

                            {invoice ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="Tài khoản hoá đơn"
                                        onChange={handleChange}
                                        type="text"
                                        name="hddt_username"
                                        value={hddt_username || ''}
                                    />
                                </Grid>
                            ) : null}

                            {invoice ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="Mật khẩu hoá đơn "
                                        onChange={handleChange}
                                        type="text"
                                        name="hddt_password"
                                        value={hddt_password || ''}
                                    />
                                </Grid>
                            ) : null}

                            {invoice ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="Chữ ký hoá đơn "
                                        onChange={handleChange}
                                        type="text"
                                        name="hddt_character"
                                        value={hddt_character || ''}
                                    />
                                </Grid>
                            ) : null}

                            {invoice ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="Loại chữ ký số "
                                        onChange={handleChange}
                                        type="text"
                                        name="hddt_sign_code"
                                        value={hddt_sign_code || ''}
                                    />
                                </Grid>
                            ) : null}

                            {invoice ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="Tài khoản Admin hoá đơn điện tử "
                                        onChange={handleChange}
                                        type="text"
                                        name="hddt_account"
                                        value={hddt_account || ''}
                                    />
                                </Grid>
                            ) : null}

                            {invoice ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="Mật khẩu Admin hoá đơn điện tử "
                                        onChange={handleChange}
                                        type="text"
                                        name="hddt_acpass"
                                        value={hddt_acpass || ''}
                                    />
                                </Grid>
                            ) : null}

                            {invoice ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="Đường dẫn api "
                                        onChange={handleChange}
                                        type="text"
                                        name="hddt_base_url"
                                        value={hddt_base_url || ''}
                                    />
                                </Grid>
                            ) : null}

                            {invoice ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="Mẫu hoá đơn "
                                        onChange={handleChange}
                                        type="text"
                                        name="inv_pattern"
                                        value={inv_pattern || ''}
                                    />
                                </Grid>
                            ) : null}

                            {invoice ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="Ký hiệu hoá đơn "
                                        onChange={handleChange}
                                        type="text"
                                        name="inv_serial"
                                        value={inv_serial || ''}
                                    />
                                </Grid>
                            ) : null}

                            {invoice ? (
                                <Grid lg={6} md={6} sm={12} xs={12} item>
                                    <Tooltip title="Cho phép chỉnh sửa thông tin giao dịch trước khi phát hành">
                                        <FormControlLabel
                                            className="min-w-288"
                                            control={
                                                <Checkbox
                                                    size="small"
                                                    color="primary"
                                                    onChange={(event) => {
                                                        setAuto(
                                                            event.target.checked
                                                        )
                                                    }}
                                                    value={isAuto}
                                                />
                                            }
                                            label="Cho phép chỉnh sửa thông tin giao dịch trước khi phát hành"
                                        />
                                    </Tooltip>
                                </Grid>
                            ) : null}

                            {invoice ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="Độ trễ phát hành hoá đơn "
                                        onChange={handleChange}
                                        type="text"
                                        name="publish_invoce_time"
                                        value={publish_invoce_time || ''}
                                        validators={['required', 'isNumber']}
                                        errorMessages={[
                                            'Không được để trống trường này',
                                            'Trường này bắt buộc phải nhập số',
                                        ]}
                                    />
                                </Grid>
                            ) : null}

                            {invoice ? (
                                <Grid
                                    item
                                    lg={12}
                                    md={12}
                                    sm={12}
                                    xs={12}
                                    style={{
                                        paddingTop: 20,
                                    }}
                                >
                                    <Switch
                                        onChange={(event) => {
                                            setInvoiceAuto(event.target.checked)
                                        }}
                                        checked={isInvoiceAuto}
                                        color="primary"
                                        size="medium"
                                    />
                                    <span
                                        style={{
                                            fontSize: 18,
                                            marginLeft: 20,
                                            marginTop: 5,
                                        }}
                                    >
                                        Cho phép xuất hóa đơn tự động
                                    </span>
                                </Grid>
                            ) : null}

                            <Grid lg={12} md={12} sm={12} xs={12} item>
                                <FormControlLabel
                                    className="min-w-288"
                                    control={
                                        <Checkbox
                                            size="small"
                                            color="primary"
                                            name={'he2'}
                                            onChange={(event) => {
                                                setPayment(event.target.checked)
                                            }}
                                            value={payment}
                                        />
                                    }
                                    label="Tích hợp thanh toán"
                                />
                            </Grid>
                            {payment ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="Mã QR code *"
                                        onChange={handleChange}
                                        type="text"
                                        name="qr_merchant_code"
                                        value={qr_merchant_code || ''}
                                        validators={['required']}
                                        errorMessages={[
                                            'Không được để trống trường này',
                                        ]}
                                    />
                                </Grid>
                            ) : null}

                            {payment ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="API QR key *"
                                        onChange={handleChange}
                                        type="text"
                                        name="qr_api_key"
                                        value={qr_api_key || ''}
                                        validators={['required']}
                                        errorMessages={[
                                            'Không được để trống trường này',
                                        ]}
                                    />
                                </Grid>
                            ) : null}

                            {payment ? (
                                <Grid item lg={6} md={6} sm={12} xs={12}>
                                    <TextValidator
                                        variant="outlined"
                                        className="mb-4 w-full"
                                        label="Mật khẩu QR *"
                                        onChange={handleChange}
                                        type="text"
                                        name="qr_secret_key"
                                        value={qr_secret_key || ''}
                                        validators={['required']}
                                        errorMessages={[
                                            'Không được để trống trường này',
                                        ]}
                                    />
                                </Grid>
                            ) : null}
                        </Grid>
                        <Grid container justify={'flex-end'}>
                            <Button
                                style={{
                                    marginRight: 20,
                                }}
                                color="inherit"
                                variant="contained"
                                onClick={() => {
                                    history.goBack()
                                }}
                            >
                                <span className="capitalize">Quay lại</span>
                            </Button>

                            <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
)
