import React, { useEffect, useContext } from 'react';
import { Field } from '@digigov/form/Field';
import FormBuilder from '@digigov/form/FormBuilder';
import { FormContext } from '@digigov/form/FormContext';
import Results from '@digigov/react-modules/Faq/Results';
import { createId } from '@digigov/react-modules/Faq/utils';
import PageTitleContainer, {
  PageTitleHeading,
} from '@digigov/ui/app/PageTitleContainer';
import {
  Accordion,
  AccordionSection,
  AccordionSectionContent,
  AccordionSectionSummary,
  AccordionSectionSummaryHeading,
} from '@digigov/ui/content/Accordion';
import { useAccordion } from '@digigov/ui/content/Accordion/hooks';
import Markdown from '@digigov/ui/content/Markdown';
import { SearchButton } from '@digigov/ui/form/SearchContainer';
import { Stack } from '@digigov/ui/layouts';
import { Aside } from '@digigov/ui/layouts/Basic/Aside';
import { Container } from '@digigov/ui/layouts/Basic/Container';
import { Main } from '@digigov/ui/layouts/Basic/Main';
import Grid from '@digigov/ui/layouts/Grid';
import SectionBreak from '@digigov/ui/layouts/SectionBreak';
import { BackToTop } from '@digigov/ui/navigation/BackToTopLink';
import NavList, { NavListItemAction } from '@digigov/ui/navigation/NavList';
import { Heading } from '@digigov/ui/typography/Heading';
import Hint from '@digigov/ui/typography/Hint';

export interface sectionsConfigType {
  sections: SectionType[];
}

export interface QaType {
  id?: string;
  question: string;
  answer: string;
}

export interface SectionType {
  id: string;
  title: string;
  qa: QaType[];
}

export interface TocType {
  title: string;
  placement: 'top' | 'left' | 'right' | 'none';
}

export interface SearchFilterType {
  title?: string;
}

export interface ContentsType {
  title: string;
  toc: TocType;
  search?: SearchFilterType;
}

export interface NavigationListProps {
  title?: string;
  sections: SectionType[];
}

export interface FaqProps {
  contents: ContentsType;
  sections: SectionType[];
  initialSections: sectionsConfigType;
  search: (values: Record<string, string>) => void;
  submitValues: { text: string };
  activeQa: string;
  onActiveQa: (v: string) => void;
}

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();
    }
  }, [autoSubmit, form, previousValues, values]);
  return <></>;
};

const NavigationList = React.forwardRef<HTMLUListElement, NavigationListProps>(
  function NavigationList({ title, sections }, ref) {
    return (
      <NavList ref={ref} layout="vertical" marginBottom={10}>
        {title && (
          <Heading size="md" id="contents" marginBottom={4}>
            {title}
          </Heading>
        )}
        {sections &&
          sections.length > 0 &&
          sections.map(({ id, title }, index) => (
            <NavListItemAction key={index} href={`#${createId(id, title)}`}>
              {title}
            </NavListItemAction>
          ))}
      </NavList>
    );
  }
);

export const Faq = React.forwardRef<HTMLDivElement, FaqProps>(function FAQ(
  {
    contents,
    sections,
    initialSections,
    submitValues,
    activeQa,
    onActiveQa,
    search,
  },
  ref
) {
  const { section, currentOpen, onOpen, close } = useAccordion({
    singleOpen: true,
    defaultOpen: 0,
  });
  const placement = contents.toc?.placement || 'none';
  const filteredSections = sections.reduce(
    (acc, section) => acc + (section.qa.length || 0),
    0
  );
  const primarySections = initialSections.sections.reduce(
    (acc, section) => acc + (section.qa.length || 0),
    0
  );
  const hash = window.location.hash.slice(1);
  const currentId = activeQa ? activeQa : hash;

  useEffect(() => {
    if (onActiveQa) {
      if (currentOpen && activeQa !== currentOpen) {
        onActiveQa(currentOpen as string);
      }
    }
  }, [activeQa, currentOpen, onActiveQa]);

  useEffect(() => {
    if (activeQa && activeQa !== currentOpen) {
      onOpen(activeQa);
    }
  }, [activeQa, currentOpen, onOpen]);

  useEffect(() => {
    // Scroll to the target element if it exists
    if (currentId) {
      const element = document.getElementById(currentId);
      if (element) {
        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
      }
    }
  }, [activeQa, currentId, hash]);

  const Onclose = (activeQa) => {
    const urlParams = new URLSearchParams(window.location.search);
    urlParams.delete('text');
    urlParams.delete('activeQa');
    window.history.pushState({}, '', '?' + urlParams.toString());
    onActiveQa('');
    close(activeQa);
  };
  const handleSubmit = (data) => {
    search(data);
    onActiveQa('');
    close(activeQa);
    const urlParams = new URLSearchParams(window.location.search);
    urlParams.delete('activeQa');
    window.history.replaceState({}, '', '?' + urlParams.toString());
  };

  return (
    <Container ref={ref}>
      {placement !== 'none' && placement === 'left' && (
        <Aside sticky={false}>
          <NavigationList title={contents.toc?.title} sections={sections} />
        </Aside>
      )}
      <Main>
        <PageTitleContainer>
          <PageTitleHeading size="xl" id="faq">
            {contents?.title}
          </PageTitleHeading>
        </PageTitleContainer>
        {placement !== 'none' && placement === 'top' && (
          <NavigationList title={contents?.toc?.title} sections={sections} />
        )}

        {contents.search && (
          <FormBuilder onSubmit={handleSubmit} initial={{ text: '' }}>
            {submitValues && (
              <FormBuilderSyncValues values={submitValues} autoSubmit={true} />
            )}
            <Stack
              direction="row"
              flexWrap="nowrap"
              alignItems="flex-end"
              spacing={4}
            >
              <Grid container style={{ width: '100%' }}>
                <Field
                  type="string"
                  key="text"
                  name="text"
                  placeholder="Αναζητήστε σχετικά με την ερώτησή σας"
                  label={{ primary: contents.search.title }}
                />
              </Grid>
              <SearchButton
                type="submit"
                mb={{ md: 10 }}
                style={{ minHeight: '2.75rem' }}
              />
            </Stack>
            {filteredSections !== primarySections && (
              <Results
                filteredSections={filteredSections}
                primarySections={primarySections}
                Onclose={Onclose}
                activeQa={activeQa}
              />
            )}
          </FormBuilder>
        )}
        <Grid>
          {sections && sections.length > 0 ? (
            sections.map(({ id: sectionId, title, qa }, index) => (
              <React.Fragment key={index}>
                <Heading id={createId(sectionId, title)} size="lg">
                  {title}
                </Heading>
                <Accordion marginBottom={qa && qa.length > 0 ? 12 : 0}>
                  {qa?.map(({ id, question, answer }, indx) => (
                    <AccordionSection
                      key={indx}
                      {...section(createId(id, question))}
                    >
                      <AccordionSectionSummary>
                        <AccordionSectionSummaryHeading
                          aria-controls={createId(id, question)}
                        >
                          {question}
                        </AccordionSectionSummaryHeading>
                      </AccordionSectionSummary>
                      <AccordionSectionContent id={createId(id, question)}>
                        <Markdown content={answer} />
                      </AccordionSectionContent>
                    </AccordionSection>
                  ))}
                </Accordion>
                <SectionBreak visible={false} />
              </React.Fragment>
            ))
          ) : (
            <Hint marginBottom={10}>Δεν βρέθηκαν αποτελέσματα.</Hint>
          )}
        </Grid>
        <BackToTop topLimitId="contents" id="back-to-top">
          Επιστροφή στα Περιεχόμενα
        </BackToTop>
      </Main>
      {placement !== 'none' && placement === 'right' && (
        <Aside sticky={false}>
          <NavigationList title={contents?.toc?.title} sections={sections} />
        </Aside>
      )}
    </Container>
  );
});
export default Faq;