import React, { Fragment, useState, useEffect } from 'react'
import {
    TextField,
    Icon,
    Button,
    StepLabel,
    Step,
    Stepper,
    Grid,
    FormControl,
    InputLabel,
    Select,
    MenuItem,
    Typography,
} from '@material-ui/core'
import Table from './Table'
import { Breadcrumb } from 'app/components'
import { Link } from 'react-router-dom'
import { Autocomplete, createFilterOptions } from '@material-ui/lab'
import DateRange from 'app/components/Input/DateHome'
import { toPriceVnd, convertDate } from 'app/config/Function'
function CustomerView(props) {
    const [age, setAge] = React.useState('')
    const {
        data,
        setTxtSearch,
        changeActive,
        setChangeActive,
        handeChangeActive,
        setPageIndex,
        pageIndex,
        totalRecords,
        setApplications,
        applications,
        startDate,
        changeDateRange,
        listModule,
        module,
        setModule,
        report,
        listMerchant,
        merchant,
        setMerchant,
        status,
        setStatus,
    } = props

    const handleChange = (event) => {
        setAge(event.target.value)
    }
    return (
        <Fragment>
            <div className="m-sm-30">
                <div className="mb-sm-30">
                    <Breadcrumb
                        routeSegments={[
                            {
                                name: 'Danh sách thu phí',
                                path: '/list-fee',
                            },
                        ]}
                    />
                </div>

                <Grid
                    style={{
                        padding: 10,
                        marginBottom: 10,
                    }}
                    justify={'space-between'}
                    alignItems={'center'}
                    container
                    spacing={3}
                >
                    <Grid
                        container
                        spacing={2}
                        item
                        lg={12}
                        md={12}
                        sm={12}
                        xs={12}
                    >
                        <Grid lg={3} md={3} sm={3} xs={3} item>
                            <TextField
                                variant="outlined"
                                className="w-full"
                                label="Tìm kiếm"
                                onChange={(e) => {
                                    const text = e.target.value
                                    setTxtSearch(text)
                                }}
                            />
                        </Grid>
                        <Grid lg={3} md={3} sm={3} xs={3} item>
                            <DateRange
                                date={startDate}
                                changeDateRange={changeDateRange}
                            />
                        </Grid>
                        <Grid item lg={3} md={3} sm={3} xs={3}>
                            <FormControl variant="outlined" fullWidth>
                                <InputLabel htmlFor="outlined-age-native-simple">
                                    Trạng thái
                                </InputLabel>
                                <Select
                                    label="Trạng thái"
                                    value={status}
                                    onChange={(e) => setStatus(e.target.value)}
                                    inputProps={{
                                        name: 'age',
                                        id: 'outlined-age-native-simple',
                                    }}
                                >
                                    <MenuItem value="">
                                        <em>Tất cả</em>
                                    </MenuItem>
                                    {[
                                        {
                                            id: 1,
                                            name: 'Chờ thanh toán',
                                        },
                                        {
                                            id: 2,
                                            name: 'Đã thanh toán',
                                        },
                                    ].map((e) => (
                                        <MenuItem value={e.id}>
                                            {e.name}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </FormControl>
                        </Grid>

                        <Grid item lg={3} md={3} sm={3} xs={3}>
                            <FormControl variant="outlined" fullWidth>
                                <InputLabel htmlFor="outlined-age-native-simple">
                                    Pháp nhân
                                </InputLabel>
                                <Select
                                    label="Pháp nhân"
                                    value={merchant}
                                    onChange={(e) =>
                                        setMerchant(e.target.value)
                                    }
                                    inputProps={{
                                        name: 'age',
                                        id: 'outlined-age-native-simple',
                                    }}
                                >
                                    <MenuItem value="">
                                        <em>Tất cả</em>
                                    </MenuItem>
                                    {listMerchant.map((e) => (
                                        <MenuItem value={e.id}>
                                            {e.name}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </FormControl>
                        </Grid>

                        <Grid item lg={3} md={3} sm={3} xs={3}>
                            <FormControl variant="outlined" fullWidth>
                                <InputLabel htmlFor="outlined-age-native-simple">
                                    Cửa hàng
                                </InputLabel>
                                <Select
                                    label="Cửa hàng"
                                    value={module}
                                    onChange={(e) => setModule(e.target.value)}
                                    inputProps={{
                                        name: 'age',
                                        id: 'outlined-age-native-simple',
                                    }}
                                >
                                    <MenuItem value="">
                                        <em>Tất cả</em>
                                    </MenuItem>
                                    {listModule.map((e) => (
                                        <MenuItem value={e.id}>
                                            {e.store_name}
                                        </MenuItem>
                                    ))}
                                </Select>
                            </FormControl>
                        </Grid>
                    </Grid>
                    <Grid
                        container
                        spacing={2}
                        item
                        lg={12}
                        md={12}
                        sm={12}
                        xs={12}
                    >
                        <Grid lg={12} md={12} sm={12} xs={12}>
                            <Typography>
                                Tổng số giao dịch cần thanh toán phí :{' '}
                                {toPriceVnd(report?.total_trans)}
                            </Typography>
                        </Grid>
                        <Grid lg={12} md={12} sm={12} xs={12}>
                            <Typography>
                                Tổng phí phải thanh toán :{' '}
                                {toPriceVnd(report?.total_fee)}
                            </Typography>
                        </Grid>
                        <Grid lg={12} md={12} sm={12} xs={12}>
                            <Typography>
                                Tổng phí đã thanh toán :{' '}
                                {toPriceVnd(report?.paid)}
                            </Typography>
                        </Grid>
                        <Grid lg={12} md={12} sm={12} xs={12}>
                            <Typography>
                                Tổng phí chờ thanh toán :{' '}
                                {toPriceVnd(report?.un_paid)}
                            </Typography>
                        </Grid>
                    </Grid>
                </Grid>

                <Table
                    data={data}
                    changeActive={changeActive}
                    setChangeActive={setChangeActive}
                    handeChangeActive={handeChangeActive}
                    pageIndex={pageIndex}
                    setPageIndex={setPageIndex}
                    totalRecords={totalRecords}
                />
            </div>
        </Fragment>
    )
}

export default CustomerView
