import { Box, Button, Heading, VStack, Divider } from '@chakra-ui/react';
import React from 'react';
import { useLocation, Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';

import { URLs } from '../../__data__/urls';

const Sidebar = () => {
  const location = useLocation();
  const isActive = (keyword: string) => location.pathname.includes(keyword);

  const { t } = useTranslation('~', {
    keyPrefix: 'dry-wash.arm.master.sideBar',
  });

  return (
    <Box
      borderRight='1px solid black'
      bg='gray.50'
      color='white'
      w='250px'
      p='5'
      pt='8'
    >
      <Heading color='green' size='lg' mb='5'>
        {t('title')}
      </Heading>

      <VStack align='start' spacing='4'>
        <Divider />
        {URLs.armOrder.isOn && (
          <Button
            as={Link}
            to={URLs.armOrder.url}
            w='100%'
            colorScheme={isActive(URLs.armOrder.url) ? 'green' : 'blue'}
            variant={isActive(URLs.armOrder.url) ? 'solid' : 'ghost'}
          >
            {t('orders')}
          </Button>
        )}
        <Divider />
        {URLs.armMaster.isOn && (
          <Button
            as={Link}
            to={URLs.armMaster.url}
            w='100%'
            colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
            variant={isActive(URLs.armMaster.url) ? 'solid' : 'ghost'}
          >
            {t('master')}
          </Button>
        )}
        <Divider />
      </VStack>
    </Box>
  );
};

export default Sidebar;