import React, { Dispatch, SetStateAction, useState, SyntheticEvent, useEffect, useCallback, useMemo, KeyboardEvent, CompositionEvent } from 'react'
import { Box, Tabs, Tab, Grid, TextField, FormGroup, FormControlLabel, Checkbox } from '@mui/material'
import { TabPanel, HintButton } from '@/components'
import { User } from '@/types'

const a11yProps = (index: number)=> {
	return {
		id: `vertical-tab-${index}`,
		'aria-controls': `vertical-tabpanel-${index}`,
	}
}

interface VerticalTabsProps {
	users:			User[]
	setUsers:		Dispatch<SetStateAction<User[]>>
	isSubscribed:	null | boolean
}

export const VerticalTabs = ({users, setUsers, isSubscribed}: VerticalTabsProps)=> {
	const [tabNo, setTabNo] = useState(0)

	const handleChange = (event: SyntheticEvent, tabNo: number) => {
		setTabNo(tabNo)
	}




	return (
		<Box
			sx={{ flexGrow: 1, bgcolor: 'background.paper', display: 'flex', height: 300, width:'100%' }}
		>
			{users.length > 1 && <Tabs
				orientation="vertical"
				variant="scrollable"
				value={tabNo}
				onChange={handleChange}
				aria-label="Vertical tab"
				sx={{ borderRight: 1, borderColor: 'divider', width: 60 }}
			>
				{users.map((_, index) => <Tab label={index+1} key={index} sx={{minWidth: 10}} {...a11yProps(index)} />)}
			</Tabs>}
			{users.map((user, index) => {
				return (<TabPanel value={tabNo} index={index} key={index}>
					<Grid container spacing={3}>
						<Grid item xs={12}>
							<TextField defaultValue={user.group} fullWidth label="グループ名" variant="outlined" InputProps={{readOnly: true}} disabled={!!isSubscribed} />
						</Grid>
						<Grid item xs={12}>
							<TextField defaultValue={user.name} fullWidth label="名前" variant="outlined" InputProps={{readOnly: true}} disabled={!!isSubscribed} />
						</Grid>
						<Grid item xs={12}>
							<FormControlLabel style={{ pointerEvents: "none" }} control={<Checkbox style={{ pointerEvents: "auto" }}/>} label={<span style={{ pointerEvents: "auto" }}>受付タブレットで非表示</span>} onChange={()=>setUsers(prev => prev.map(u => u.id != user.id ? u : {...user, isStealth: !user.isStealth}))} checked={user.isStealth}  disabled={!!isSubscribed} />
						</Grid>
						<Grid item xs={12}>
							<FormControlLabel style={{ pointerEvents: "none" }} control={<Checkbox style={{ pointerEvents: "auto" }}/>} label={<span style={{ pointerEvents: "auto" }}>デフォルト応答名義</span>} checked={user.isDefaultResponder} />
							<HintButton>
								デフォルト応答名義はグループ毎に1ユーザだけ指定できます。<br />
								ポップアップウインドウにて呼び出しを受けたグループと同じグループのデフォルトユーザが選択状態となります。<br />
								全体で1ユーザだけ指定した場合は呼び出されたグループにかかわらず選択状態となります。
							</HintButton>
						</Grid>
					</Grid>
					
					

				</TabPanel>)
			})}
		</Box>
	)
}
export default VerticalTabs