import { FC, ReactNode } from 'react';

import ArrowBackIosNewIcon from '@material-hu/icons/material/ArrowBackIosNew';
import Box from '@material-hu/mui/Box';
import Divider from '@material-hu/mui/Divider';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';
import useMediaQuery from '@material-hu/mui/useMediaQuery';

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

import { useAuth } from 'src/contexts/JWTContext';
import { hasAnyPermissions, ROUTE_PERMISSIONS } from 'src/utils/permissions';

type ChatsSidebarProps = {
  title: string;
  actions?: ReactNode;
  actionsPosition?: 'start' | 'end';
  start?: ReactNode;
  containerStyles?: any;
  searchBar?: JSX.Element;
  onlyTitle?: boolean;
  withMassiveApprove?: boolean;
  hide?: boolean;
  onBackClick?: (boolean) => void;
};

export const CHATS_SIDEBAR_WIDTH = 350;

const ChatsSidebar: FC<React.PropsWithChildren<ChatsSidebarProps>> = props => {
  const {
    title,
    children,
    hide = false,
    actions,
    actionsPosition = 'end',
    start,
    containerStyles,
    searchBar,
    onlyTitle,
    withMassiveApprove = false,
    onBackClick,
  } = props;

  const { permissions } = useAuth();

  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));

  if (hide) return null;

  return (
    <Box
      sx={{
        display: 'flex',
        backgroundColor: 'background.paper',
        borderRight: 1,
        borderColor: 'divider',
        flexDirection: 'column',
        maxWidth: '100%',
        width: isMobile ? '100%' : CHATS_SIDEBAR_WIDTH,
        height: '100%',
        ...containerStyles,
      }}
    >
      {start &&
        hasAnyPermissions(permissions, ROUTE_PERMISSIONS.TICKETS) &&
        !onlyTitle && (
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              mt: 2,
              mb: 0,
            }}
          >
            {start}
          </Box>
        )}

      <Box
        sx={{
          alignItems: 'center',
          display: 'flex',
          flexDirection: actionsPosition === 'end' ? 'row' : 'row-reverse',
          justifyContent: 'space-between',
          m: 2,
          minHeight: 'auto',
        }}
      >
        {!onlyTitle && (
          <Typography
            color="textPrimary"
            variant="h6"
            sx={{
              ml: actionsPosition === 'end' ? 0 : 2,
              mr: actionsPosition === 'end' ? 0 : 'auto',
            }}
          >
            {title}
          </Typography>
        )}
        {onlyTitle && (
          <Button
            onClick={onBackClick}
            startIcon={
              <ArrowBackIosNewIcon
                color="secondary"
                fontSize="large"
              />
            }
          >
            <Typography
              color="textPrimary"
              variant="h6"
            >
              {title}
            </Typography>
          </Button>
        )}
        {(!onlyTitle || withMassiveApprove) && actions}
      </Box>
      {searchBar}
      <Divider sx={{ mx: 2 }} />
      {children}
    </Box>
  );
};

export default ChatsSidebar;