import { ReactElement } from 'react';
import {
  faArrowDownAZ,
  faCalendarDays,
  faDownLeftAndUpRightToCenter,
  faFire,
  faFlag,
  faLayerGroup,
  faMagnet,
  faUpRightAndDownLeftFromCenter,
} from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import IconButton from '@mui/joy/IconButton';
import ToggleButtonGroup from '@mui/joy/ToggleButtonGroup';
import { Stack, Tooltip } from '@mui/joy';
import { Tag } from '../../db/db';
import { PageFilter, PageSortOrder, refreshHotness } from '../../db/pages';
import { useAppDispatch } from '../../store/hooks';
import { expandAllTags, collapseAllTags } from '../../store/uiSlice';

interface FlexViewHeaderProps {
  tagsSorted: Tag[];
  sortOrder: PageSortOrder;
  setSortOrder: (sortOrder: PageSortOrder) => void;
  filter: PageFilter;
  setFilter: (filter: PageFilter) => void;
  groupByWindow: boolean;
  setGroupByWindow: (groupByWindow: boolean) => void;
}

const FlexViewHeader = ({
  tagsSorted,
  sortOrder,
  setSortOrder,
  filter,
  setFilter,
  groupByWindow,
  setGroupByWindow,
  children,
}: FlexViewHeaderProps & { children?: React.ReactNode }): ReactElement => {
  const dispatch = useAppDispatch();

  return (
    <Stack
      direction={'row'}
      style={{ minHeight: '33.6px', margin: '0.5rem 0.5rem 0.5rem 0.5rem' }}
      justifyContent="flex-start"
      alignItems="center"
      spacing={1}
      className="flexFixedSize"
    >
      {children}

      {tagsSorted.length > 0 && (
        <>
          <Tooltip title="Expand All" placement="bottom">
            <IconButton
              onClick={() => dispatch(expandAllTags({ tags: tagsSorted.map((t) => t.name) }))}
              title="Expand All"
            >
              <FontAwesomeIcon icon={faUpRightAndDownLeftFromCenter} />
            </IconButton>
          </Tooltip>
          <Tooltip title="Collapse All" placement="bottom">
            <IconButton onClick={() => dispatch(collapseAllTags())} title="Collapse All">
              <FontAwesomeIcon icon={faDownLeftAndUpRightToCenter} />
            </IconButton>
          </Tooltip>
        </>
      )}

      <ToggleButtonGroup
        value={sortOrder}
        onChange={(event, newValue) => {
          if (newValue === PageSortOrder.hot) {
            refreshHotness(); // async fire and forget
          }
          setSortOrder(newValue || PageSortOrder.recent);
        }}
      >
        
        <Tooltip title="Sort by Similar" placement="bottom-end">
          <IconButton value={PageSortOrder.similarity}>
            <FontAwesomeIcon icon={faMagnet} />
          </IconButton>
        </Tooltip><Tooltip title="Sort by Hot" placement="bottom-start">
          <IconButton value={PageSortOrder.hot}>
            <FontAwesomeIcon icon={faFire} />
          </IconButton>
        </Tooltip>
        <Tooltip title="Sort by Recent" placement="bottom-start">
          <IconButton value={PageSortOrder.recent}>
            <FontAwesomeIcon icon={faCalendarDays} />
          </IconButton>
        </Tooltip>
        <Tooltip title="Sort by Domain" placement="bottom">
          <IconButton value={PageSortOrder.domain}>
            <FontAwesomeIcon icon={faArrowDownAZ} />
          </IconButton>
        </Tooltip>
        <Tooltip title="Sort by Title" placement="bottom-end">
          <IconButton value={PageSortOrder.title}>
            <FontAwesomeIcon icon={faArrowDownAZ} />
          </IconButton>
        </Tooltip>
      </ToggleButtonGroup>

      <Tooltip title="Group by Window" placement="bottom">
        <IconButton
          variant="outlined"
          color="neutral"
          onClick={() => setGroupByWindow(!groupByWindow)}
          aria-pressed={groupByWindow ? 'true' : 'false'}
          sx={(theme) => ({
            [`&[aria-pressed="true"]`]: {
              ...theme.variants.outlinedActive.neutral,
              borderColor: theme.vars.palette.neutral.outlinedHoverBorder,
            },
          })}
        >
          <FontAwesomeIcon icon={faLayerGroup} />
        </IconButton>
      </Tooltip>

      <Tooltip title="Flagged Only" placement="bottom">
        <IconButton
          variant="outlined"
          color="neutral"
          onClick={() => setFilter({ ...filter, flagged: !filter.flagged })}
          aria-pressed={filter.flagged ? 'true' : 'false'}
          sx={(theme) => ({
            [`&[aria-pressed="true"]`]: {
              ...theme.variants.outlinedActive.neutral,
              borderColor: theme.vars.palette.neutral.outlinedHoverBorder,
            },
          })}
        >
          <FontAwesomeIcon icon={faFlag} />
        </IconButton>
      </Tooltip>
    </Stack>
  );
};

export default FlexViewHeader;