import { PropsWithChildren, ReactElement } from 'react';
import MultiSelectActions from './MultiSelectActions';
import Typography from '@mui/joy/Typography';
import { useAppDispatch, useAppSelector } from '../../store/hooks';
import { clearSelection, selectSelectedUrls, selectAutoComputeSimilarity, setAutoComputeSimilarity } from '../../store/uiSlice';
import { setSimilarUrlsAsync } from '../../store/windowsSlice';
import { useLiveQuery } from 'dexie-react-hooks';
import { addTag, fetchPages } from '../../db/pages';
import { faSquare, faSquareCheck, faSquareMinus } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  Stack,
  Button,
  Tooltip,
  Switch,
} from '@mui/joy';

interface InspectorProps {
  onSelectAll?: () => void;
}

const Inspector = ({
  children,
  onSelectAll,
}: PropsWithChildren<InspectorProps>): ReactElement => {
  const dispatch = useAppDispatch();
  const selectedUrls = useAppSelector(selectSelectedUrls);
  // const selectedPages =
  //   useLiveQuery(
  //     monitorAsync(() => selectPages(selectedUrls), 'Inspector selectPages'),
  //     [selectedUrls]
  //   ) || [];

  const autoComputeSimilarity = useAppSelector(selectAutoComputeSimilarity);


  return (
    <Stack
      style={{
        margin: '0.5rem 0.5rem 0.5rem 0.5rem',
        height: '100%',
      }}
      direction={'column'}
      spacing={1}
    >


      {children}

      <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
        <Typography level="body-sm">Auto-compute Similar Pages</Typography>
        <Switch
          size="sm"
          checked={autoComputeSimilarity}
          onChange={(event) => {
            const checked = event.target.checked;
            dispatch(setAutoComputeSimilarity(checked));
            if (checked && selectedUrls.length > 0) {
              dispatch(setSimilarUrlsAsync());
            }
          }}
        />
      </Stack>

      <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
        <Typography level="title-md">Selection</Typography>
        <Stack direction="row" alignItems="center" spacing={1}>
          {onSelectAll && (
            <Tooltip title={selectedUrls.length > 0 ? "Clear Selection" : "Select All"} placement="top">
              <div
                style={{ cursor: 'pointer', display: 'flex', alignItems: 'center' }}
                onClick={(event) => {
                  event.stopPropagation();
                  if (selectedUrls.length > 0) {
                    dispatch(clearSelection());
                  } else {
                    onSelectAll();
                  }
                }}
              >
                <FontAwesomeIcon
                  icon={selectedUrls.length > 0 ? faSquareMinus : faSquare} // Using minus for "clear all" concept if some selected, or check if we want check? User said "unselect all". 
                  // Actually user said "unselect all if anything is selected". So standard behavior for a bulk select is:
                  // If anything selected -> Indeterminate (minus) or Checked -> Click -> Clear.
                  // If nothing selected -> Unchecked -> Click -> Select All.
                  // Since "Select All" selects *everything* (not just what's selected), showing 'checked' might be misleading if only 1 item is selected.
                  // But "Indeterminate" (minus) is good for "some selected".
                  style={{ fontSize: '1rem', color: 'var(--joy-palette-text-icon)' }}
                />
              </div>
            </Tooltip>
          )}
          {onSelectAll && (
            <Tooltip title="Select all items" placement="top">
              <Button
                onClick={onSelectAll}
                variant="plain"
                color="neutral"
                size="sm"
                sx={{ px: 1, borderRadius: 'xs' }}
              >
                Select All
              </Button>
            </Tooltip>
          )}
        </Stack>
      </Stack>

      <MultiSelectActions
        selectedUrls={selectedUrls}
        // selectedPages={selectedPages}
        onClickTag={(tag) => addTag(selectedUrls, tag)}
      />
      <div style={{ flexGrow: 10 }}></div>


    </Stack>
  );
};

export default Inspector;