// resources\assets\ts\DataPage\index.tsx

import { Provider, shallowEqual, useDispatch, useSelector } from 'react-redux';
import { Trans } from '@lingui/macro';
import I18nProvider from 'B/I18nProvider';
import React from 'react';
import ReactDOM from 'react-dom';

import CssBaseline from '@mui/material/CssBaseline';
import Paper from '@mui/material/Paper';
import type { PaperProps } from '@mui/material/Paper';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CloneTaskDialog from '../share/aufgaben-shared/components/CloneTaskDialog';
import styled from 'styled-components';

import DataTable from './DataTable';

import CounterForm from './CounterForm';
import DeleteConfirmDialog from './DeleteConfirmationDialog';
import EmailDialog from '../share/aufgaben-shared/components/EmailDialog';
import Filters from './Filters';
import HistoryDialog from './HistoryDialog';
import MeasurementForm from './MeasurementForm';
import MoveTaskDialog from './MoveTaskDateDialog';
import NewTaskList from './NewTaskList';
import QuitConfirmDialog from './QuitTaskConfirmationDialog';
import TaskNavigator from './TaskNavigator';

import { RootState } from './rootReducer';
import { fetchSearch, setRequestFromEmail } from './dataSlice';
import { resetNode } from './nodeSlice';
import { saveWidth, treeWidth } from './localstorage';
import { setFilterHeight, setMenubarHeight } from './styleSlice';
import { setSearchStr } from '../share/aufgaben-shared/slices/filterSlice';
import { grey } from '@mui/material/colors';
import i18n from './i18n';
import store from './store';

import EditTimeDialog from './EditTimeDialog';
import FileDrop from './FileDrop';
import ImgDelConfirmDialog from './ImageDeleteConfirmationDialog';
import Menubar from './Menubar';
import SearchDrawer from './SearchDrawer';
import { setupI18n } from 'B/i18nSetup';

setupI18n();

const theme = createTheme({
  palette: {
    primary: {
      main: grey[500],
    },
    background: {
      default: grey[50],
    }
  },
  components: {
    MuiFormControl: {
      defaultProps: {
        variant: 'outlined',
      }
    },
    MuiCssBaseline: {
      styleOverrides: {
      body: {
        fontSize: '0.875rem',
        letterSpacing: '0.01071em',
        lineHeight: 1.43,
      },
    },
  },
    MuiInputLabel: {
      defaultProps: {
        disableAnimation: true,
        variant: 'outlined',
      },
    },
    MuiSelect: {
      defaultProps: {
        variant: 'outlined',
      }
    },
    MuiTextField: {
      defaultProps: {
        variant: 'outlined',
      }
    },
  },
});

const ResizeBar = styled.div`
  cursor: col-resize;
  width: 0.3rem;
`;

const TreeContainer = styled(Paper)<PaperProps & { $menuBarHeight: number }>`
  /* overflow: auto; */
  overflow-x: hidden;
  overflow-y: auto;
  height: calc(100vh - ${(props) => props.$menuBarHeight}px);
`;

const App = () => {
  const d = useDispatch();
  const selectedNode = useSelector((state: RootState) => state.node);
  const { menuBarHeight, filterHeight, paginationHeight } = useSelector(
    (state: RootState) => ({
      menuBarHeight: state.style.menuBarHeight,
      filterHeight: state.style.filterHeight,
      paginationHeight: state.style.paginationHeight,
    }),
    shallowEqual
  );

  const resizeBarRef = React.useRef(null);
  const treeContainerRef = React.useRef(null);
  const saveWidthProcessID = React.useRef(null);
  const contentContainerRef = React.useRef(null);
  const handleResize = (e) => {
    const width =
      e.pageX - treeContainerRef.current.getBoundingClientRect().left;

    treeContainerRef.current.style.width = width + 'px';
  };

  const handleResizeStop = () => {
    window.removeEventListener('mousemove', handleResize);
    window.removeEventListener('mouseup', handleResizeStop);
    if (saveWidthProcessID.current !== null) {
      clearTimeout(saveWidthProcessID.current);
      saveWidthProcessID.current = null;
    }

    const treeWidth = treeContainerRef.current.offsetWidth;
    saveWidthProcessID.current = setTimeout(() => {
      saveWidth(treeWidth);
    }, 2000);
    contentContainerRef.current.style.width = `calc(100vw - ${treeWidth}px)`;
  };

  const handleResizeStart = (e) => {
    e.preventDefault();
    window.addEventListener('mousemove', handleResize);
    window.addEventListener('mouseup', handleResizeStop);
  };

  React.useEffect(function resizeTree() {
    if (resizeBarRef.current === null) return;
    if (treeContainerRef.current === null) return;
    if (contentContainerRef.current === null) return;
    const bar: HTMLElement = resizeBarRef.current;
    const container: HTMLElement = treeContainerRef.current;

    const width = treeWidth();
    container.style.width = width + 'px';
    contentContainerRef.current.style.width = `calc(100vw - ${width}px)`;

    bar.addEventListener('mousedown', handleResizeStart);

    return () => {
      bar.removeEventListener('mousedown', handleResizeStart);
    };
  });

  const filter = React.useRef(null);
  React.useEffect(function adjustFilterHeight() {
    const clientHeight = filter.current?.clientHeight ?? 0;
    if (clientHeight === 0) return;
    if (filterHeight === clientHeight) return;
    d(setFilterHeight(clientHeight));
  });

  return (
    <ThemeProvider theme={theme}>
      {/* @ts-ignore */}
        <CssBaseline />
        <Menubar />
        <div style={{ height: 'calc(100vh - 64px)', overflow: 'hidden' }}>
          <div style={{ display: 'flex' }}>
            <TreeContainer
              square
              ref={treeContainerRef}
              $menuBarHeight={menuBarHeight}
            >
              <TaskNavigator selectedNode={selectedNode}/>
            </TreeContainer>
            <ResizeBar ref={resizeBarRef} />
            <div
              ref={contentContainerRef}
              style={{ marginLeft: 'auto', marginRight: 'auto' }}
            >
              <Paper ref={filter} style={{ padding: '1em', marginTop: '1em' }}>
                <Filters />
              </Paper>

              <DataTable/>
            </div> 
            <SearchDrawer />
          </div>
        </div>
        <EmailDialog />
        <CloneTaskDialog />
        <DeleteConfirmDialog />
        <QuitConfirmDialog />
        <HistoryDialog />
        <MoveTaskDialog />
        <MeasurementForm />
        <CounterForm />
        <NewTaskList />
        <EditTimeDialog />
        <ImgDelConfirmDialog />
        <FileDrop />
    </ThemeProvider>
  );
};

const r = document.getElementById('app');
ReactDOM.render(
  <Provider store={store}>
    <I18nProvider>
    <App />
    </I18nProvider>
  </Provider>,
  r
);

if (process.env.NODE_ENV === 'development' && module.hot) {
  module.hot.accept();
}