import React from 'react';
import { style } from 'app/styles';
import { useSelector, useDispatch } from 'react-redux';

import { getHighlightedCommitIds } from 'app/selectors/stateVars';
import { highlightCommits, requestRerender, setSearch } from 'app/actions';

import { Stats } from 'app/containers/Stats';
import { Authors } from 'app/containers/Authors';
import { Files } from 'app/containers/Files';
import { Commits } from 'app/containers/Commits';
import { Search } from 'app/containers/Search';
import { ResetLink } from 'app/components/ResetLink';

import { CollapsibleSidePanel } from 'app/components/CollapsibleSidePanel';

const containerStyle = {
  _extends: ['altPanel'],
  overflow: 'hidden',
};

const searchAndResetStyle = {
  position: 'relative',
  minHeight: 60,
};

const resetStyle = {
  position: 'absolute',
  right: 5,
};

const resetHighlightsLinkStyle = {
  marginLeft: '@margins.large+px',
  marginTop: '@margins.small+px',
};

export const SidePanel: React.FC = (): React.ReactElement => {
  const highlightedCommitIds = useSelector(getHighlightedCommitIds);
  const dispatch = useDispatch();

  return (
    <CollapsibleSidePanel
      style={containerStyle}
      onOpen={didOpenSidePanel}
      onClose={didCloseSidePanel}
    >
      <div style={{ flexGrow: 1, overflow: 'hidden' }}>
        <Stats />
        <div style={style(searchAndResetStyle)}>
          <Search />
          <ResetLink style={style(resetStyle)} onClick={onResetClick}>
            Reset Search
          </ResetLink>
        </div>
        <Authors />
        <Commits />
        <Files />
      </div>
    </CollapsibleSidePanel>
  );

  function onResetClick() {
    dispatch(highlightCommits([]));
    dispatch(setSearch(null));
  }

  function didOpenSidePanel() {
    dispatch(requestRerender());
  }

  function didCloseSidePanel() {
    dispatch(requestRerender());
  }
};