import { useEffect, useState } from 'react';
import DropDown from '../DropDown';
import { DropDownItem, Page, Pages } from '../../types/types';

const items = [
  { value: 1, label: 'All pages', disabled: false },
  { value: 2, label: 'Specific pages', disabled: false },
];

export default function VisibleOnPages() {
  const [visibleOnSettings, setVisibleOnSettings] =
    useState<string>('All pages');
  const [visibleOnPagesList, setVisibleOnPagesList] = useState<Pages>([]);
  const [dropdownPages, setDropdownPages] = useState<Pages>([]);

  useEffect(() => {
    getVisibleOnSettings();
  }, []);

  useEffect(() => {
    if (visibleOnSettings === 'Specific pages') {
      fetchVisibleOnPages();
    }
  }, [visibleOnSettings]);

  /**
   * Post visible on pages
   * @param pages
   */
  async function postVisibleOnPages(pages: Pages): Promise<void> {
    try {
      fetch(wpApiSettings.root + 'botfoundry/v1/set-visible-on-pages', {
        method: 'POST',
        headers: {
          'X-WP-Nonce': wpApiSettings.nonce, // Include the nonce for authentication
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          visibleOnPages: pages,
        }),
      });
    } catch (error) {
      alert('Error fetching visible on pages');
      console.error('Error fetching visible on pages', error);
    }
  }

  /**
   * Fetch visible on pages
   */
  async function fetchVisibleOnPages(): Promise<void> {
    try {
      const request = await fetch(
        wpApiSettings.root + 'botfoundry/v1/get-visible-on-pages',
        {
          headers: {
            'X-WP-Nonce': wpApiSettings.nonce, // Include the nonce for authentication
            'Content-Type': 'application/json',
          },
        }
      );
      if (!request.ok) {
        throw new Error('An error occurred while fetching visible on pages.');
      }
      const { visibleOnPages } = await request.json();

      if (!Array.isArray(visibleOnPages)) {
        throw new Error('Visible on pages is not an array');
      }
      if (visibleOnPages) {
        fetchPages(visibleOnPages);
        setVisibleOnPagesList(visibleOnPages);
      }
    } catch (error) {
      alert('Error fetching visible on pages');
      console.error('Error fetching visible on pages', error);
    }
  }

  /**
   * Post visible on settings
   * @param value
   */
  async function postVisibleOnSettings(value: string): Promise<void> {
    try {
      fetch(wpApiSettings.root + 'botfoundry/v1/set-visible-on-setting', {
        method: 'POST',
        headers: {
          'X-WP-Nonce': wpApiSettings.nonce, // Include the nonce for authentication
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          visibleOnSettings: value,
        }),
      });
    } catch (error) {
      alert('Error fetching visible on Settings');
      console.error('Error fetching visible on Settings', error);
    }
  }

  /**
   * Fetch visible on settings
   */
  async function getVisibleOnSettings(): Promise<void> {
    try {
      const request = await fetch(
        wpApiSettings.root + 'botfoundry/v1/get-visible-on-setting',
        {
          headers: {
            'X-WP-Nonce': wpApiSettings.nonce, // Include the nonce for authentication
            'Content-Type': 'application/json',
          },
        }
      );
      const { visibleOnSettings } = await request.json();
      if (visibleOnSettings) {
        setVisibleOnSettings(visibleOnSettings);
      }
    } catch (error) {
      alert('Error fetching visible on pages');
      console.error('Error fetching visible on pages', error);
    }
  }

  /**
   * Fetch pages
   * @param excludePages
   */
  async function fetchPages(excludePages: Pages): Promise<void> {
    try {
      const urls = [
        wpApiSettings.root + 'wp/v2/pages?per_page=100',
        wpApiSettings.root + 'botfoundry/v1/get-frontpage-id',
      ];
      const responses = await Promise.all(
        urls.map((url) => {
          return fetch(url);
        })
      );
      const responsesJson = await Promise.all(
        responses.map((response) => {
          if (!response.ok) {
            throw new Error('An error occurred while fetching settings.');
          }
          return response.json();
        })
      );

      if (!Array.isArray(responsesJson[0])) {
        throw new Error('Pages is not an array');
      }
      if (responsesJson[1] && responsesJson[1].frontPageId) {
        responsesJson[0].push({
          slug: 'frontpage',
          id: parseInt(responsesJson[1]?.frontPageId),
        });
      }

      let pages = responsesJson[0].filter(
        (page: any) => !excludePages.map((d) => d.label).includes(page.slug)
      );
      let dropdownPages = pages.map((page: any, i: number) => ({
        value: i + 2,
        label: page.slug,
        disabled: false,
        id: page.id,
      }));
      dropdownPages = [
        { id: 0, value: 1, label: 'Select page', disabled: false },
        ...dropdownPages,
      ];
      setDropdownPages(sortDropdownPages(dropdownPages));
    } catch (error) {
      alert('Error fetching pages');
      console.error('Error fetching pages', error);
    }
  }

  /**
   * Sort dropdown pages
   * @param _newDropdownPages
   * @returns
   */
  function sortDropdownPages(_newDropdownPages: Pages): Pages {
    _newDropdownPages.sort((a: DropDownItem, b: DropDownItem) => {
      // Sort alphabetically but Select page should always be first
      if (a.label === 'Select page') {
        return -1;
      }
      if (b.label === 'Select page') {
        return 1;
      }
      return a.label.localeCompare(b.label);
    });

    _newDropdownPages.forEach((page: DropDownItem, i: number) => {
      page.value = i + 1;
    });
    return [..._newDropdownPages];
  }

  function pageSettingsChangeHandler(target: any): void {
    const value = items[target.value - 1].label;
    setVisibleOnSettings(value);
    postVisibleOnSettings(value);
  }

  function engageAiPillChangeHandler(page: Page, index: number): void {
    const newVisibleOnPagesList = [...visibleOnPagesList];
    newVisibleOnPagesList.splice(index, 1);

    const newDropdownPages = [
      ...dropdownPages,
      {
        value: dropdownPages.length - 1,
        label: page.label,
        disabled: false,
        id: page.id,
      },
    ];
    setVisibleOnPagesList(newVisibleOnPagesList);
    postVisibleOnPages(newVisibleOnPagesList);
    setDropdownPages(sortDropdownPages(newDropdownPages));
  }

  function selectActivePagesChangeHandler(page: Page): void {
    const newDropdownPages = [...dropdownPages];
    newDropdownPages.splice(
      dropdownPages.map((d) => d.label).indexOf(page.label),
      1
    );
    const _newDropdownPages = newDropdownPages.map((page, i) => ({
      value: i + 1,
      label: page.label,
      disabled: false,
      id: page.id,
    }));

    setDropdownPages(sortDropdownPages(_newDropdownPages));
    const newActivePagesList = [...visibleOnPagesList, page];
    setVisibleOnPagesList(newActivePagesList);
    postVisibleOnPages(newActivePagesList);
  }
  return (
    <div className="visible-on-pages">
      <h4 className="mt-0 mb-8">Chat visible on pages</h4>
      <p>You can enable the chat bot on all pages or only on specific pages.</p>
      <div className="d-flex gap-8">
        <div className="botfoundry-input">
          <label className="botfoundry-label">Setting</label>
          <DropDown
            id="select-page-settings"
            selected={visibleOnSettings}
            items={items}
            onChange={pageSettingsChangeHandler}
          />
        </div>
        {visibleOnSettings === 'Specific pages' && (
          <div className="botfoundry-input">
            <label className="botfoundry-label">Your pages</label>
            <DropDown
              id="select-active-pages"
              selected={'Select page'}
              items={dropdownPages}
              onChange={selectActivePagesChangeHandler}
            />
          </div>
        )}
      </div>
      {visibleOnSettings === 'Specific pages' && (
        <div className="botfoundry-pill-container">
          {visibleOnPagesList.map((page, index) => (
            <div
              className="botfoundry-pill"
              key={index}
              onClick={() => engageAiPillChangeHandler(page, index)}
            >
              {page.label} &times;
            </div>
          ))}
        </div>
      )}
    </div>
  );
}