import { Box, Button, Typography, alpha, styled } from '@mui/material'
import { useEffect, useState } from 'react'
import { CustomDialog } from '../../../ModalButtons/DialogButton'
import SearchDialog from './SearchDialog'
import { Search } from '@mui/icons-material'

const StyledSearchBox = styled(Box)(({ theme }) => ({
  display: 'flex',
  gap: '10px',
  border: theme.borders.grayLight,
  borderRadius: '6px',
  height: '40px',
  padding: '0 14px',
  alignItems: 'center',
  cursor: 'pointer',
  '&:hover': { backgroundColor: theme.palette.secondary.light },
  '& .MuiTypography-paragraph': {
    fontWeight: '500',
  },
  '& .MuiSvgIcon-root': {
    fill: alpha(theme.palette.secondary.main, 0.4),
  },
}))

export default function SearchButton() {
  const [open, setOpen] = useState(false)

  useEffect(() => {
    document.addEventListener('keydown', (e) => {
      if (e.ctrlKey && e.key === 'k') {
        e.preventDefault()
        setOpen(true)
      }
    })
    return () => {
      document.removeEventListener('keydown', () => {})
    }
  }, [])

  return (
    <div>
      <StyledSearchBox
        onClick={() => {
          setOpen(true)
        }}
      >
        <Search />
        <Typography paragraph>Search</Typography>
        <Typography variant="subtitle2">(Ctrl+k)</Typography>
      </StyledSearchBox>
      <CustomDialog
        content={() => <SearchDialog />}
        onClose={() => {
          setOpen(false)
        }}
        open={open}
        dialogProps={{
          sx: {
            '& .MuiDialog-container': {
              alignItems: 'baseline',
              paddingTop: '80px',
            },
          },
          maxWidth: 'md',
        }}
      />
    </div>
  )
}
