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 DialogTrans from '../Dialog/Dialog'

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,
        isDetail,
        idPaymentPartner,
    } = props

    const handleChange = (event) => {
        setAge(event.target.value)
    }
    return (
        <Fragment>
            <Grid
                style={{
                    padding: 10,
                    marginBottom: 10,
                }}
                //justify={'space-between'}
                alignItems={'center'}
                container
                spacing={3}
            >
                {!isDetail ? (
                    <Grid
                        item
                        lg={6}
                        md={6}
                        sm={12}
                        xs={12}
                        style={{
                            display: 'flex',
                        }}
                    >
                        <TextField
                            label="Tìm mã giao dịch"
                            fullWidth
                            name="money"
                            variant="outlined"
                            onChange={(event) => {}}
                        />
                        {/* 
                    <Button
                        // onClick={onAdd}
                        variant="contained"
                        color="default"
                        style={{
                            marginLeft: 20,
                            width: 200,
                        }}
                    >
                        Chọn giao dịch
                    </Button> */}

                        <DialogTrans idPaymentPartner={idPaymentPartner} />
                    </Grid>
                ) : null}

                <Grid
                    item
                    lg={6}
                    md={6}
                    sm={12}
                    xs={12}
                    style={{
                        justifyContent: !isDetail ? 'center' : 'start',
                        alignItems: 'center',
                        display: 'flex',
                    }}
                >
                    <Typography
                        style={{
                            textAlign: 'center',
                            fontSize: 20,
                            fontWeight: 'bold',
                            color: '#027A48',
                        }}
                    >
                        Số giao dịch: 20; Số hoa hồng: 5.300.000 VNĐ
                    </Typography>
                </Grid>
            </Grid>

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

export default CustomerView
