import React, { useContext, useEffect } from 'react';
import FormBuilder from '@digigov/form/FormBuilder';
import { FormContext } from '@digigov/form/FormContext';
import { FieldSpec } from '@digigov/form/types';
import { FilterChips } from '@digigov/react-modules/FilteredResults/FilterChips';
import { FilterFields } from '@digigov/react-modules/FilteredResults/FilterFields';
import FilterContainer, {
  FilterContent,
  FilterHeadingContainer,
} from '@digigov/ui/app/FilterContainer';
import { Button } from '@digigov/ui/form/Button';
import { Grid } from '@digigov/ui/layouts/Grid';
import { SectionBreak } from '@digigov/ui/layouts/SectionBreak';
import { Drawer, DrawerHeading } from '@digigov/ui/navigation/Drawer';
import { useDrawer } from '@digigov/ui/navigation/Drawer/hooks';
import { Heading } from '@digigov/ui/typography/Heading';

export type ScalarType = string | number | boolean | null | undefined;

export interface DataConfigType {
  key: string;
  title: string;
  displayComponent?: (value: string | number | boolean) => React.ReactNode;
}
export interface FilteredResultsProps<
  DT extends Record<string, ScalarType>,
  FT extends Record<string, ScalarType>,
> {
  fields: FieldSpec[];
  data: DT[];
  variant?: 'drawer-left' | 'drawer-right' | 'block';
  defaultFilters?: FT;
  currentFilters?: FT;
  onSearch: (filters: unknown) => void;
  children?: React.ReactNode;
}

export const FormBuilderSyncValues = ({ values, autoSubmit }) => {
  const form = useContext(FormContext);
  const previousValues = form.getValues();
  useEffect(() => {
    const mergedObject = { ...values, ...previousValues };
    let shouldSubmit = false;
    for (const key in mergedObject) {
      // catching the filters that have been parsed from url & avoid continuous submitting
      if (values[key] !== undefined && previousValues[key] !== values[key]) {
        shouldSubmit = true;
        previousValues[key] = values[key];
        form.setValue(key, values[key]);
      }
    }
    if (autoSubmit && shouldSubmit) {
      form.submit();
    }
  }, [values]);
  return <></>;
};

export interface BlockFilteredResultsProps {
  fields: FieldSpec[];
  children?: React.ReactNode;
}

export interface DrawerFilteredResultsProps extends BlockFilteredResultsProps {
  direction?: 'left' | 'right';
}

export const DrawerFilteredResults = React.forwardRef<
  HTMLDivElement,
  DrawerFilteredResultsProps
>(function DrawerFilteredResults(
  { fields, direction = 'left', ...props },
  ref
) {
  const { registerDrawer, registerAction, currentOpen } = useDrawer();

  return (
    <>
      {currentOpen && (
        <Grid item xs={12} md={12} lg={4} ref={ref}>
          <Drawer
            {...registerDrawer('filters-drawer', {
              upRelative: 'lg',
              direction,
            })}
          >
            <DrawerHeading {...registerAction('filters-drawer', 'close')}>
              <Heading size="md">Φίλτρα</Heading>
            </DrawerHeading>
            <FilterContent>
              <FilterFields fields={fields} horizontal={false} />
            </FilterContent>
          </Drawer>
        </Grid>
      )}
      <Grid item xs={12} md={12} lg={currentOpen ? 8 : 12}>
        <Button
          mb={4}
          {...registerAction(
            'filters-drawer',
            currentOpen === 'filters-drawer' ? 'close' : 'open'
          )}
          color="secondary"
        >
          Φίλτρα
        </Button>
        <FilterChips />
        {props.children}
      </Grid>
    </>
  );
});

export const BlockFilteredResults = React.forwardRef<
  HTMLDivElement,
  BlockFilteredResultsProps
>(function BlockFilteredResults({ fields, ...props }, ref) {
  const [open, setOpen] = React.useState(true);
  return (
    <Grid item xs={12} ref={ref}>
      <FilterContainer open={open}>
        <FilterHeadingContainer onClick={() => setOpen(false)}>
          <Heading size="md">Φίλτρα</Heading>
        </FilterHeadingContainer>
        <FilterContent>
          <FilterChips />
          <FilterFields fields={fields} horizontal={true} />
        </FilterContent>
      </FilterContainer>
      <Button color="secondary" mdUpHidden mb={4} onClick={() => setOpen(true)}>
        Φίλτρα
      </Button>
      <SectionBreak size="md" visible={false} />
      {props.children}
    </Grid>
  );
});

export const FilteredResults = React.forwardRef<
  HTMLFormElement,
  FilteredResultsProps<Record<string, ScalarType>, Record<string, ScalarType>>
>(function FilteredResults(
  {
    fields,
    onSearch,
    variant = 'block',
    defaultFilters,
    currentFilters,
    children,
  },
  ref
) {
  const isDrawer = variant.startsWith('drawer-');
  return (
    <FormBuilder
      onSubmit={onSearch}
      initial={defaultFilters}
      fields={fields}
      grid
      ref={ref}
    >
      {currentFilters && (
        <FormBuilderSyncValues values={currentFilters} autoSubmit={true} />
      )}
      {isDrawer ? (
        <DrawerFilteredResults
          fields={fields}
          direction={variant === 'drawer-right' ? 'right' : 'left'}
        >
          {children}
        </DrawerFilteredResults>
      ) : (
        <BlockFilteredResults fields={fields}>{children}</BlockFilteredResults>
      )}
    </FormBuilder>
  );
});

export default FilteredResults;