import React, { Fragment, useState, useEffect } from 'react'
import {
    TextField,
    Icon,
    Button,
    StepLabel,
    Step,
    Stepper,
    Grid,
    FormControl,
    InputLabel,
    Select,
    MenuItem,
} 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 useAuth from 'app/hooks/useAuth'
import { checkRole } from 'app/config/Function'
function CustomerView(props) {
    const {
        data,
        updateItem,
        removeItem,
        setTxtSearch,
        changeActive,
        setChangeActive,
        handeChangeActive,
        setPageIndex,
        pageIndex,
        totalRecords,
        permissions,
    } = props
    const [age, setAge] = React.useState('')
    const { user } = useAuth()
    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 chức năng',
                                path: '/function',
                            },
                        ]}
                    />
                </div>

                <Grid
                    style={{
                        padding: 10,
                        marginBottom: 20,
                    }}
                    justify={'space-between'}
                    alignItems={'center'}
                    container
                    spacing={3}
                >
                    <Grid item lg={3} md={3} sm={6} xs={6}>
                        <TextField
                            variant="outlined"
                            className="w-full"
                            label="Nhập từ khoá"
                            onChange={(e) => {
                                const text = e.target.value
                                setTimeout(() => {
                                    setTxtSearch(text)
                                }, 1000)
                            }}
                        />
                    </Grid>
                    {checkRole(user, '/function/create') ? (
                        <Link to="/function/create">
                            <Button
                                variant="contained"
                                className={'bg-light-primary'}
                            >
                                <span className={'text-primary'}>Thêm mới</span>
                            </Button>
                        </Link>
                    ) : null}
                </Grid>

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

export default CustomerView
