// ** MUI Imports
import { useState, useEffect, forwardRef } from 'react'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import TextField from '@mui/material/TextField'
import { Label } from 'recharts'
import { FormControl } from '@mui/material'
import Select, { SelectChangeEvent } from '@mui/material/Select'
// ** Icon Imports
import Icon from 'src/@core/components/icon'
import InputLabel from '@mui/material/InputLabel'
import MenuItem from '@mui/material/MenuItem'

interface TableHeaderProps {
  value: string
}

const TableHeader = (props: TableHeaderProps) => {
  // ** Props
  const [value, setValue] = useState<string>('')
  const [statusValue, setStatusValue] = useState<string>('')


  const handleFilter = (val: string) => {
    setValue(val)
  }

  const handleStatusValue = (e: SelectChangeEvent) => {
    setStatusValue(e.target.value)
  }

  return (
    <>
    <Box sx={{ p: 5, pb: 3, display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', fontSize: '24px' }}>
      <span className="mr-4 mb-2">企業</span> 
    </Box>
    <Box sx={{ p: 5, pb: 3, display: 'flex', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between' }}>
      <FormControl size='small'>
        <InputLabel id='invoice-status-select'>グループ名</InputLabel>
        <Select
          sx={{ pr: 4 , minWidth : '30rem'}}
          value={statusValue}
          label='グループ名'
          onChange={handleStatusValue}
          labelId='invoice-status-select'
        >
          <MenuItem value=''>----</MenuItem>
          <MenuItem value='1'>〇〇グループ1</MenuItem>
          <MenuItem value='2'>〇〇グループ2</MenuItem>
          <MenuItem value='3'>〇〇グループ3</MenuItem>
        </Select>
      </FormControl>
      
      <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}>
        <Button sx={{ mb: 2 }} variant='contained' href='/master/company/create'>
        新規登録
        </Button>
      </Box>
    </Box>
  </>
  )
}

export default TableHeader