// @ts-nocheck -- TODO: fix remaining type errors in this file
import { type ReactNode, useEffect } from 'react';
import { FormProvider, useForm } from 'react-hook-form';

import * as colors from '@material-hu/mui/colors';
import Paper from '@material-hu/mui/Paper';
import Stack from '@material-hu/mui/Stack';

import useResultsFilters, {
  ResultsFiltersProvider,
} from 'src/contexts/ManagerResultsFiltersContext';
import { ComparisionSurvey } from '../types';

import SurveysAutocomplete from './SurveysAutocomplete';

type FormValues = {
  comparisionSurvey: ComparisionSurvey;
};

// * Disabled temporally
const HAS_FILTERS_VISIBLE = false;

const FiltersHeader = () => {
  const { state, setState } = useResultsFilters()!;
  const form = useForm<FormValues>({
    defaultValues: {
      comparisionSurvey: state.comparisionSurvey,
    },
  });

  const { watch } = form;
  const comparisionSurvey = watch('comparisionSurvey');

  useEffect(() => {
    setState({ comparisionSurvey });
  }, [comparisionSurvey]);

  return (
    <Paper
      sx={{
        px: 3,
        py: 2,
        bgcolor: theme => theme.palette.new.background.layout.default,
        zIndex: 1,
        borderLeft: '1px solid',
        borderColor: theme => theme.palette.new.border.neutral.divider,
      }}
      elevation={2}
      square
    >
      <FormProvider {...form}>
        <Stack sx={{ flexDirection: 'row', justifyContent: 'flex-end', pt: 1 }}>
          <SurveysAutocomplete
            name="comparisionSurvey"
            sx={{ width: 300 }}
          />
        </Stack>
      </FormProvider>
    </Paper>
  );
};

const ResultLayout = ({ children }: { children: ReactNode }) => {
  return (
    <ResultsFiltersProvider>
      <Stack sx={{ overflowY: 'auto' }}>
        {HAS_FILTERS_VISIBLE && <FiltersHeader />}
        {children}
      </Stack>
    </ResultsFiltersProvider>
  );
};

export default ResultLayout;