import React, { useContext, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';
import { useRouter } from 'next/router';
import { useTheme } from '@mui/material/styles';
import {
  CheckCircleOutlineRounded,
  ChevronLeftRounded,
  ChevronRightRounded,
  ConstructionRounded,
  DarkModeRounded,
  DoNotDisturb,
  LightModeRounded,
  RemoveCircleOutline,
} from '@mui/icons-material';

import * as routers from './modules/constants/routes';
import {
  ROUTE_APP_BAR,
  ROUTE_CARD,
  ROUTE_DATE_TIME_RANGE_PICKER,
  ROUTE_DURATION_FIELD,
  ROUTE_STEPPER,
  ROUTE_TIME_RANGE_PICKER,
} from './modules/constants/routes';
import { APPEARANCE_MODE_LIGHT } from '@/mui/constants';

import { SettingsContext } from '@/modules/@common/app/SettingsProvider';
import MenuItemWithScroll from '@/modules/designSystem/components/MenuItem';
import { Box, Button, List, ListItem, Paper, Stack, Typography } from '@/mui/components';

import styles from './DesignSystemLayout.module.scss';

const DONE = '1';
const IN_PROGRESS = '2';
const UNUSED = '3';
const UN_EXISTS = '4';

const undoneStatuses = {
  [IN_PROGRESS]: [ROUTE_DURATION_FIELD],
  [UNUSED]: [ROUTE_APP_BAR, ROUTE_CARD, ROUTE_STEPPER],
  [UN_EXISTS]: [ROUTE_TIME_RANGE_PICKER, ROUTE_DATE_TIME_RANGE_PICKER],
};

const sections = Object.values(routers)
  .map((path) => {
    const title =
      path
        .split('/design-system/')
        .pop()
        ?.split(/[-/]/)
        .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
        .join(' ') ?? '';

    const status = Object.keys(undoneStatuses).find((key) => undoneStatuses[key].includes(path)) ?? DONE;

    return {
      title,
      path,
      status,
    };
  })
  .sort((a, b) => a.title.localeCompare(b.title));

const doneSection = [];
const inProgressSection = [];
const unusedSection = [];
const unExistSection = [];

sections.forEach((section) => {
  if (section.status === IN_PROGRESS) {
    inProgressSection.push(section);
  } else if (section.status === UNUSED) {
    unusedSection.push(section);
  } else if (section.status === UN_EXISTS) {
    unExistSection.push(section);
  } else {
    doneSection.push(section);
  }
});

function DesignSystemLayout(props) {
  const router = useRouter();
  const theme = useTheme();
  const [expanded, setExpanded] = useState(true);
  const { themeMode, onToggleMode } = useContext(SettingsContext);

  return (
    <Stack direction="row" className={styles.Wrapper}>
      <Button
        shape="circular"
        square
        variant="contained"
        color="neutral"
        size="xSmall"
        className={styles.Button}
        onClick={onToggleMode}
        startIcon={themeMode === APPEARANCE_MODE_LIGHT ? <DarkModeRounded /> : <LightModeRounded />}
      />
      <div className={styles.MenuWrapper}>
        <Button
          size="small"
          color="primary"
          square
          shape="circular"
          className={classNames(styles.MenuButton, {
            [styles.MenuButton___expanded]: expanded,
          })}
          onClick={() => setExpanded((s) => !s)}
        >
          {!expanded ? <ChevronRightRounded /> : <ChevronLeftRounded />}
        </Button>
        <Box
          className={classNames(styles.Menu, {
            [styles.Menu___expanded]: expanded,
          })}
        >
          <Paper>
            <List disablePadding>
              {doneSection.map(({ title, path }) => (
                <MenuItemWithScroll
                  key={title}
                  path={path}
                  title={title}
                  color={theme.palette.success.main}
                  selected={router.route === path}
                  icon={<CheckCircleOutlineRounded />}
                />
              ))}
              {!!inProgressSection.length && (
                <ListItem disablePadding>
                  <Typography variant="subtitle1" color="warning" className={styles.SubTitle}>
                    IN PROGRESS
                  </Typography>
                </ListItem>
              )}
              {inProgressSection.map(({ title, path }) => (
                <MenuItemWithScroll
                  key={title}
                  path={path}
                  title={title}
                  color={theme.palette.warning.main}
                  selected={router.route === path}
                  icon={<ConstructionRounded />}
                />
              ))}
              <ListItem disablePadding>
                <Typography variant="subtitle1" className={styles.SubTitle} color="text.secondary">
                  UNUSED
                </Typography>
              </ListItem>
              {unusedSection.map(({ title, path }) => (
                <MenuItemWithScroll
                  key={title}
                  path={path}
                  title={title}
                  color={theme.palette.text.secondary}
                  selected={router.route === path}
                  icon={<RemoveCircleOutline />}
                />
              ))}
              <ListItem disablePadding>
                <Typography variant="subtitle1" className={styles.SubTitle} color="error">
                  DOESN`T EXISTS
                </Typography>
              </ListItem>
              {unExistSection.map(({ title, path }) => (
                <MenuItemWithScroll
                  key={title}
                  path={path}
                  title={title}
                  color={theme.palette.error.main}
                  selected={router.route === path}
                  icon={<DoNotDisturb />}
                />
              ))}
            </List>
          </Paper>
        </Box>
      </div>
      <Box className={styles.BoxWrapper}>
        <Box className={styles.Box}>{props.children}</Box>
      </Box>
    </Stack>
  );
}

DesignSystemLayout.propTypes = {
  children: PropTypes.node.isRequired,
};

export default DesignSystemLayout;
