import { Box, Button, Heading, HStack, Divider, Flex } 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 Header = () => {
  const location = useLocation();
  const isActive = (keyword: string) => location.pathname.includes(keyword);

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

  return (
    <Box as='header' bg='gray.50' boxShadow='md' px={6} py={4} w='100%'>
      <Flex gap={50} align='center'>
        <Heading color='green' size='lg'>
          {t('title')}
        </Heading>
        <HStack spacing={4}>
          {URLs.armOrder.isOn && (
            <Button
              as={Link}
              to={URLs.armOrder.url}
              colorScheme={isActive(URLs.armOrder.url) ? 'green' : 'blue'}
              variant={isActive(URLs.armOrder.url) ? 'outline' : 'ghost'}
            >
              {t('orders')}
            </Button>
          )}
          <Divider orientation='vertical' height='30px' />
          {URLs.armMaster.isOn && (
            <Button
              as={Link}
              to={URLs.armMaster.url}
              colorScheme={isActive(URLs.armMaster.url) ? 'green' : 'blue'}
              variant={isActive(URLs.armMaster.url) ? 'outline' : 'ghost'}
              data-testid='master-button'
            >
              {t('master')}
            </Button>
          )}

          {URLs.armMap.isOn && (
            <Button
              as={Link}
              to={URLs.armMap.url}
              colorScheme={isActive(URLs.armMap.url) ? 'green' : 'blue'}
              variant={isActive(URLs.armMap.url) ? 'outline' : 'ghost'}
              data-testid='master-button'
            >
              Карта заказов
            </Button>
          )}
        </HStack>
      </Flex>
    </Box>
  );
};

export default Header;