import { IconMathFunction, IconPlus } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import Button from '@material-hu/components/design-system/Buttons/Button';

import useHuGoTheme from 'src/hooks/useHuGoTheme';
import useCustomRangesEditDrawer from 'src/pages/dashboard/Goals/Configuration/components/CustomRangesDrawer/hooks/useCustomRangesEditDrawer';
import { useLokaliseTranslation } from 'src/utils/i18n';

const ConfigurationHeader = () => {
  const HuGoThemeProvider = useHuGoTheme();
  const { t } = useLokaliseTranslation('goals');
  const { drawer, showDrawer } = useCustomRangesEditDrawer();

  return (
    <HuGoThemeProvider>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
        }}
      >
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 2 }}>
          <Stack
            sx={{
              width: 40,
              height: 40,
              flex: 'none',
              alignItems: 'center',
              borderRadius: '50%',
              justifyContent: 'center',
              backgroundColor: theme =>
                theme?.palette?.hugoBackground?.primaryBgLighter,
            }}
          >
            <IconMathFunction />
          </Stack>
          <Typography
            variant="globalL"
            fontWeight="fontWeightSemiBold"
            color={theme => theme.palette.textColors?.primaryText}
          >
            {t('formulas.title')}
          </Typography>
        </Stack>
        <Button
          variant="contained"
          onClick={() => showDrawer()}
          startIcon={<IconPlus size={16} />}
        >
          {t('formulas.create')}
        </Button>
      </Stack>
      {drawer}
    </HuGoThemeProvider>
  );
};

export default ConfigurationHeader;