import React, { useState, useEffect } from 'react'
import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator'
import { Button, Grid, Typography } from '@material-ui/core'

import {
    detailPaymentCost,
    acceptPaymentCost,
} from 'app/apis/Functions/landingpage'
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 { toPriceVnd, trimObject } from 'app/config/Function'
import { connect } from 'react-redux'
import localStorageService from 'app/services/localStorageService'
import { useTranslation } from 'react-i18next'
const SimpleForm = (props) => {
    const [state, setState] = useState({})
    const history = useHistory()
    const location = useLocation()
    const { t } = useTranslation()
    const [listFunc, setListFunc] = useState([])

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

    const getData = async () => {
        props.showLoading()
        const res = await detailPaymentCost(location.state, {})
        props.hideLoading()
        if (res.data.code == 200 && res.data.data) {
            setState({
                ...res.data.data?.data,
                status_name:
                    res.data.data?.data.status == 1
                        ? 'Đã thanh toán'
                        : 'Chưa thanh toán',
            })
            setListFunc(res.data.data.lstDetail)
        } else if (res.data.code == 401) {
            localStorageService.removeToken()
            setTimeout(() => {
                history.push('/')
            }, 100)
        } else {
            toast.error(t(res.data.error), {
                theme: 'colored',
            })
        }
    }

    const handleSubmit = async (event) => {
        props.showLoading()
        const res = await acceptPaymentCost(state?.id)
        props.hideLoading()
        if (res.data.code == 200) {
            getData()
            toast.success('Xác nhận 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 handleDateChange = (date) => {
        setState({ ...state, date })
    }

    const {
        description,
        gas_name,
        num_fuel,
        packageName,
        email,
        num_gas,
        date_created,
        phone,
        sumMoney,
        address,
        num_year,
        status,
        supplierName,
        status_name,
    } = state

    return (
        <div className="m-sm-30">
            <div className="mb-sm-30">
                <div className="mb-sm-30">
                    <Breadcrumb
                        routeSegments={[
                            {
                                name: 'Danh sách chức năng gói',
                                path: '/package-function',
                            },
                            { name: 'Cập nhật chức năng' },
                        ]}
                    />
                </div>
                <SimpleCard>
                    <ValidatorForm onSubmit={handleSubmit} onError={() => null}>
                        <Grid container spacing={3}>
                            <Grid item lg={12} md={12} sm={12} xs={12}>
                                <Typography variant="h6">
                                    Thông tin phiếu đăng ký
                                </Typography>
                            </Grid>
                            <Grid item lg={4} md={4} sm={6} xs={6}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Tên cây xăng"
                                    disabled
                                    type="text"
                                    name="gas_name"
                                    value={gas_name || ''}
                                />
                            </Grid>
                            <Grid item lg={4} md={4} sm={6} xs={6}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Số trụ xăng"
                                    disabled
                                    type="text"
                                    name="num_fuel"
                                    value={num_fuel || ''}
                                />
                            </Grid>
                            <Grid item lg={4} md={4} sm={6} xs={6}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Gói đăng ký"
                                    disabled
                                    type="text"
                                    name="packageName"
                                    value={packageName || ''}
                                />
                            </Grid>
                            <Grid item lg={4} md={4} sm={6} xs={6}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Email"
                                    disabled
                                    type="text"
                                    name="email"
                                    value={email || ''}
                                />
                            </Grid>
                            <Grid item lg={4} md={4} sm={6} xs={6}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Số vòi mỗi trụ"
                                    disabled
                                    type="text"
                                    name="num_gas"
                                    value={num_gas || ''}
                                />
                            </Grid>
                            <Grid item lg={4} md={4} sm={6} xs={6}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Thời gian đăng ký"
                                    disabled
                                    type="text"
                                    name="num_year"
                                    value={num_year || ''}
                                />
                            </Grid>
                            <Grid item lg={4} md={4} sm={6} xs={6}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Số điện thoại"
                                    disabled
                                    type="text"
                                    name="phone"
                                    value={phone || ''}
                                />
                            </Grid>
                            <Grid item lg={4} md={4} sm={6} xs={6}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Đơn vị cung cấp main"
                                    disabled
                                    type="text"
                                    name="supplierName"
                                    value={supplierName || ''}
                                />
                            </Grid>
                            <Grid item lg={4} md={4} sm={6} xs={6}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Tổng số tiền"
                                    disabled
                                    type="text"
                                    name="description"
                                    value={toPriceVnd(sumMoney) || ''}
                                />
                            </Grid>
                            <Grid item lg={4} md={4} sm={6} xs={6}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Địa chỉ"
                                    disabled
                                    type="text"
                                    name="address"
                                    value={address || ''}
                                />
                            </Grid>
                            <Grid item lg={4} md={4} sm={6} xs={6}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Ngày đăng ký"
                                    disabled
                                    type="text"
                                    name="date_created"
                                    value={date_created || ''}
                                />
                            </Grid>
                            <Grid item lg={4} md={4} sm={6} xs={6}>
                                <TextValidator
                                    className="mb-4 w-full"
                                    label="Trạng thái"
                                    disabled
                                    type="text"
                                    name="status_name"
                                    value={status_name || ''}
                                />
                            </Grid>

                            <Grid item lg={12} md={12} sm={12} xs={12}>
                                <Typography variant="h6">
                                    Chi tiết chi phí
                                </Typography>
                            </Grid>

                            {listFunc.map((row) => (
                                <Grid
                                    item
                                    lg={12}
                                    md={12}
                                    sm={12}
                                    xs={12}
                                    container
                                >
                                    <Grid
                                        item
                                        lg={12}
                                        md={12}
                                        sm={12}
                                        xs={12}
                                        container
                                        spacing={1}
                                    >
                                        <Grid item lg={8} md={8} sm={6} xs={6}>
                                            <Typography
                                                style={{
                                                    fontSize: 16,
                                                    fontWeight: 'bold',
                                                }}
                                            >
                                                {row?.Name}
                                            </Typography>
                                        </Grid>
                                        <Grid item lg={1} md={1} sm={2} xs={2}>
                                            <Typography
                                                style={{
                                                    fontSize: 16,
                                                    fontWeight: 'bold',
                                                }}
                                            >
                                                SL
                                            </Typography>
                                        </Grid>
                                        <Grid item lg={1} md={1} sm={2} xs={2}>
                                            <Typography
                                                style={{
                                                    fontSize: 16,
                                                    fontWeight: 'bold',
                                                }}
                                            >
                                                ĐVT
                                            </Typography>
                                        </Grid>
                                        <Grid item lg={1} md={1} sm={2} xs={2}>
                                            <Typography
                                                style={{
                                                    fontSize: 16,
                                                    fontWeight: 'bold',
                                                }}
                                            >
                                                Đơn giá
                                            </Typography>
                                        </Grid>
                                        <Grid item lg={1} md={1} sm={2} xs={2}>
                                            <Typography
                                                style={{
                                                    fontSize: 16,
                                                    fontWeight: 'bold',
                                                }}
                                            >
                                                Thành tiền
                                            </Typography>
                                        </Grid>
                                    </Grid>

                                    {row.Details.map((e) => (
                                        <Grid
                                            item
                                            lg={12}
                                            md={12}
                                            sm={12}
                                            xs={12}
                                            container
                                            spacing={1}
                                        >
                                            <Grid
                                                item
                                                lg={8}
                                                md={8}
                                                sm={6}
                                                xs={6}
                                            >
                                                <Typography
                                                    style={{
                                                        fontSize: 14,
                                                    }}
                                                >
                                                    {e?.cons_name}
                                                </Typography>
                                            </Grid>
                                            <Grid
                                                item
                                                lg={1}
                                                md={1}
                                                sm={2}
                                                xs={2}
                                            >
                                                <Typography
                                                    style={{
                                                        fontSize: 14,
                                                    }}
                                                >
                                                    {e?.quantity}
                                                </Typography>
                                            </Grid>
                                            <Grid
                                                item
                                                lg={1}
                                                md={1}
                                                sm={2}
                                                xs={2}
                                            >
                                                <Typography
                                                    style={{
                                                        fontSize: 14,
                                                    }}
                                                >
                                                    {e?.unit}
                                                </Typography>
                                            </Grid>
                                            <Grid
                                                item
                                                lg={1}
                                                md={1}
                                                sm={2}
                                                xs={2}
                                            >
                                                <Typography
                                                    style={{
                                                        fontSize: 14,
                                                    }}
                                                >
                                                    {toPriceVnd(e?.price)}
                                                </Typography>
                                            </Grid>
                                            <Grid
                                                item
                                                lg={1}
                                                md={1}
                                                sm={2}
                                                xs={2}
                                            >
                                                <Typography
                                                    style={{
                                                        fontSize: 14,
                                                    }}
                                                >
                                                    {toPriceVnd(e?.money)}
                                                </Typography>
                                            </Grid>
                                        </Grid>
                                    ))}
                                </Grid>
                            ))}
                        </Grid>
                        <Grid
                            style={{
                                marginTop: 40,
                            }}
                            container
                            justify={'flex-end'}
                        >
                            <Button
                                style={{
                                    marginRight: 20,
                                }}
                                color="inherit"
                                variant="contained"
                                onClick={() => {
                                    history.goBack()
                                }}
                            >
                                <span className="capitalize">Quay lại</span>
                            </Button>

                            {state?.status == 0 ? (
                                <Button
                                    color="primary"
                                    variant="contained"
                                    type="submit"
                                >
                                    <span className="capitalize">
                                        Xác nhận thanh toán
                                    </span>
                                </Button>
                            ) : null}
                        </Grid>
                    </ValidatorForm>
                </SimpleCard>
            </div>
        </div>
    )
}

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