import React, { ReactElement, useEffect, useRef, useState } from 'react';
import { ModuleContainer, StyleContainer } from '@divi/module';

import { requestJson } from '../../utils';

export const SearchEdit = (props: any): ReactElement => {
  const { attrs, id, name, elements } = props;
  const [previewHtml, setPreviewHtml] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const abortRef = useRef<AbortController>();

  const moduleData = attrs?.module?.innerContent?.desktop?.value ?? {};
  const categoryFilter = moduleData.categoryFilter ?? 'on';
  const tagFilter = moduleData.tagFilter ?? 'off';
  const displayTagAs = moduleData.displayTagAs ?? 'searchbox';
  const creationDateFilter = moduleData.creationDateFilter ?? 'on';
  const updateDateFilter = moduleData.updateDateFilter ?? 'on';
  const typeFilter = moduleData.typeFilter ?? 'off';
  const weightFilter = moduleData.weightFilter ?? 'off';
  const minimizeFilters = moduleData.minimizeFilters ?? 'off';
  const perPageFilter = moduleData.perPageFilter ?? '20';

  useEffect(() => {
    if (abortRef.current) {
      abortRef.current.abort();
    }

    abortRef.current = new AbortController();
    setIsLoading(true);

    requestJson(
      {
        action: 'wpfd',
        task: 'category.callSearchShortcode',
        categoryFilter: categoryFilter === 'on' ? '1' : '0',
        tagFilter: tagFilter === 'on' ? '1' : '0',
        tagAs: String(displayTagAs),
        creationDateFilter: creationDateFilter === 'on' ? '1' : '0',
        updateDateFilter: updateDateFilter === 'on' ? '1' : '0',
        typeFilter: typeFilter === 'on' ? '1' : '0',
        weightFilter: weightFilter === 'on' ? '1' : '0',
        minimizeFilters: minimizeFilters === 'on' ? '1' : '0',
        pageFilter: String(perPageFilter),
      },
      abortRef.current.signal
    ).then((response) => {
      setPreviewHtml(response?.data ?? '');
      setIsLoading(false);
    }).catch((error) => {
      if (error?.name !== 'AbortError') {
        setIsLoading(false);
      }
    });

    return () => {
      if (abortRef.current) {
        abortRef.current.abort();
      }
    };
  }, [
    categoryFilter,
    tagFilter,
    displayTagAs,
    creationDateFilter,
    updateDateFilter,
    typeFilter,
    weightFilter,
    minimizeFilters,
    perPageFilter,
  ]);

  return (
    <ModuleContainer
      attrs={attrs}
      elements={elements}
      id={id}
      name={name}
      stylesComponent={(styleProps: any) => (
        <StyleContainer mode={styleProps.mode} state={styleProps.state}>
          {elements.style({ attrName: 'module' })}
        </StyleContainer>
      )}
    >
      {elements.styleComponents({ attrName: 'module' })}
      {isLoading ? (
        <div className="divi-search-container">
          <div className="wpfd-loading-wrapper">
            <strong>Loading search preview...</strong>
          </div>
        </div>
      ) : (
        <div className="divi-search-container">
          <div dangerouslySetInnerHTML={{ __html: previewHtml }} />
        </div>
      )}
    </ModuleContainer>
  );
};