import React, { 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 } =
    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' ? (
        <>
          {closeButton}
          {minimizeButton}
          {maximizeButton}
        </>
      ) : (
        <>{closeButton}</>
      )}
    </Flex>
  )
}

export default DashboardWindowButtons
