import { useContext } from 'react'
import { Flex, Button } from 'antd'
import { ElectronContext } from '../context/ElectronContext'
import XMarkIcon from '../../Icons/XMarkIcon'
import MinusIcon from '../../Icons/MinusIcon'
import ContractIcon from '../../Icons/ContractIcon'
import ExpandIcon from '../../Icons/ExpandIcon'

const DashboardWindowButtons = () => {
  const { isMaximized, handleWindowControl, platform, isFullScreen } =
    useContext(ElectronContext)

  const closeButton = (
    <Button
      icon={<XMarkIcon />}
      type={'text'}
      onClick={() => handleWindowControl('close')}
    />
  )
  const maximizeButton = (
    <Button
      icon={<MinusIcon />}
      type={'text'}
      onClick={() => handleWindowControl('minimize')}
    />
  )
  const minimizeButton = (
    <Button
      icon={isMaximized ? <ContractIcon /> : <ExpandIcon />}
      type={'text'}
      onClick={() => handleWindowControl('maximize')}
    />
  )

  return (
    <Flex align='center'>
      {platform == 'darwin' ? (
        isFullScreen == false ? (
          <div style={{ width: '80px' }} />
        ) : null
      ) : (
        <div style={{ width: '95px', marginRight: '2.5px' }}>
          <Flex style={{ position: 'relative', zIndex: 9999 }}>
            {maximizeButton}
            {minimizeButton}
            {closeButton}
          </Flex>
        </div>
      )}
    </Flex>
  )
}

export default DashboardWindowButtons