import { useState } from 'react'
import { Grid, Stack, Tooltip, IconButton, styled } from '@mui/material'
import { SettingsOutlined } from '@mui/icons-material'
import SettingDrawer from './SettingDrawer'
import type { Theme } from '@mui/material'

const SettingIcon = styled(IconButton)(({ theme }) => {
  const t = theme as Theme
  return {
    padding: '4px',
    border: `1px solid ${t.palette.yacolor.boc[t.palette.mode]}`,
    borderRadius: '10px',
  }
})

const RightContainer: React.FC = () => {
  const [opened, setOpened] = useState<boolean>(false)
  return (
    <Grid item xs={10}>
      <Stack direction="row-reverse" spacing={1.3}>
        <Tooltip title="Global settings" enterDelay={300}>
          <SettingIcon color="primary" onClick={() => setOpened(true)}>
            <SettingsOutlined fontSize="small" />
          </SettingIcon>
        </Tooltip>
      </Stack>
      <SettingDrawer opened={opened} onClose={() => setOpened(false)} />
    </Grid>
  )
}

export default RightContainer