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'

function CustomerView(props) {
    const [age, setAge] = React.useState('')
    const {
        data,
        setTxtSearch,
        changeActive,
        setChangeActive,
        handeChangeActive,
        setPageIndex,
        pageIndex,
        totalRecords,
        setApplications,
        applications,
        startDate,
        changeDateRange,
        type,
        setType,
        listType,
        listMerchant,
        setMerchant,
        merchant,
        store,
        setStore,
        listStore,
        customSelect,
        handleClose,
        listSelected,
        setListSelected,
        onAdd,
        listMedthodPay,
    } = props

    const handleChange = (event) => {
        setAge(event.target.value)
    }
    return (
        <Fragment>
            <Grid
                style={{
                    padding: 10,
                    marginBottom: 20,
                }}
                //justify={'space-between'}
                alignItems={'center'}
                container
                spacing={3}
            >
                <Grid item lg={2} md={2} sm={3} xs={3}>
                    <TextField
                        variant="outlined"
                        className="w-full"
                        label="Nhập mã giao dịch"
                        onChange={(e) => {
                            const text = e.target.value
                            setTxtSearch(text)
                        }}
                    />
                </Grid>

                <Grid item lg={2} md={2} sm={3} xs={3}>
                    <FormControl variant="outlined" fullWidth>
                        <InputLabel htmlFor="outlined-age-native-simple">
                            Phương thức thanh toán
                        </InputLabel>
                        <Select
                            label="Phương thức thanh toán"
                            value={type}
                            onChange={(e) => setType(e.target.value)}
                            inputProps={{
                                name: 'age',
                                id: 'outlined-age-native-simple',
                            }}
                        >
                            <MenuItem value="">
                                <em>Tất cả</em>
                            </MenuItem>
                            {listMedthodPay.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ây xăng
                        </InputLabel>
                        <Select
                            label="Cây xăng"
                            value={store}
                            onChange={(e) => setStore(e.target.value)}
                            inputProps={{
                                name: 'age',
                                id: 'outlined-age-native-simple',
                            }}
                        >
                            <MenuItem value="">
                                <em>Tất cả</em>
                            </MenuItem>
                            {listStore.map((e) => (
                                <MenuItem value={e.id}>{e.name}</MenuItem>
                            ))}
                        </Select>
                    </FormControl>
                </Grid>

                <Grid item lg={2} md={2} sm={3} xs={3}>
                    <DateRange
                        date={startDate}
                        changeDateRange={changeDateRange}
                    />
                </Grid>
            </Grid>

            <Table
                data={data}
                changeActive={changeActive}
                setChangeActive={setChangeActive}
                handeChangeActive={handeChangeActive}
                pageIndex={pageIndex}
                setPageIndex={setPageIndex}
                totalRecords={totalRecords}
                customSelect={customSelect}
                listSelected={listSelected}
                setListSelected={setListSelected}
            />
            <Grid
                item
                lg={12}
                md={12}
                sm={12}
                xs={12}
                container
                justify={'flex-end'}
                style={{
                    marginTop: 20,
                }}
            >
                <Button
                    style={{
                        marginRight: 20,
                        width: 100,
                    }}
                    color="inherit"
                    variant="contained"
                    onClick={() => {
                        handleClose()
                    }}
                >
                    <span className="capitalize">Huỷ</span>
                </Button>

                <Button
                    style={{
                        width: 100,
                    }}
                    color="primary"
                    variant="contained"
                    onClick={() => {
                        onAdd()
                    }}
                >
                    <span className="capitalize">Lưu</span>
                </Button>
            </Grid>
        </Fragment>
    )
}

export default CustomerView
