import { useEffect, useReducer, useState } from 'react';
import axios from 'axios';
import parse from 'html-react-parser';
import SideContent from '@/layout/SideContent';
const FETCH_START = 'FETCH_START';
const FETCH_SUCCESS = 'FETCH_SUCCESS';
const FETCH_ERROR = 'FETCH_ERROR';
const SEARCH_SUCCESS = 'SEARCH_SUCCESS'

function reducer(state, action) {
  switch (action.type) {
    case FETCH_START:
      return { ...state, loading: true };
    case FETCH_SUCCESS:
      return { ...state, loading: false, htmlContent: action.payload, sideContent: <SideContent parsedHtml={action.payload} />, error: null };
    case FETCH_ERROR:
      return { ...state, loading: false, error: action.payload };
    case SEARCH_SUCCESS:
      return { ...state, loading: false, searchContent: action.payload,  htmlContent: action.payload, error: null }
    default:
      return state;
  }
}

const initialState = {
  sideContent: null,
  htmlContent: null,
  loading: true,
  error: null,
  searchContent: null
};

export function useFetchData(wrId) {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    const fetchData = async (wrId) => {
      dispatch({ type: FETCH_START });
      try {
        const response = await axios.get(`/php/gnuboard5/bbs/board_view.php?bo_table=manual&wr_id=${wrId}`, {
          headers: {
            'Access-Control-Allow-Origin': '*',
          },
          crossDomain: true,
        });
        const htmlString = response.data;
        const parsedHtml = parse(htmlString, {
          replace: (domNode) => {
            if(domNode.name === "div" && domNode.attribs.class === "col-md-12"){
              domNode.attribs.class = "bo_v_wrap w-full";
            }
            if (domNode.name === "section" && domNode.attribs.id === "bo_v_info") {
              return <></>
            }
            if (domNode.name === "h2" && domNode.attribs.id === "bo_v_atc_title") {
              return <></>
            }
            if (domNode.name === "div" && domNode.attribs.id === "bo_v_img") {
              return <></>
            }
            if (domNode.type === 'tag' && (domNode.name === 'span' || domNode.name === 'b' || domNode.name === 'p')) {
              if (domNode.attribs.class !== 'nb_date') {
                const { children } = domNode;

                if (children && children.length > 0) {
                  const text = children[0]?.data || '';
                  
                  if (text[0] === '*') {
                    domNode.attribs = { ...domNode.attribs, class: 'sub_tit' };
                  } else if (/\d+\./.test(text)) {
                    domNode.attribs = { ...domNode.attribs, class: 'li' };
                  }
                }
              }
            }
            if (domNode.name === "h2" && domNode.attribs.id === "bo_v_title") {
              return <h2 id="bo_v_title" style={{ fontSize: "1.5em" }}>{domNode.children[1].children[2].data}</h2>
            }
            
          },
        });

        dispatch({ type: FETCH_SUCCESS, payload: parsedHtml });
        
      } catch (error) {
        console.log(error);
        dispatch({ type: FETCH_ERROR, payload: error.message });
      }
    }
    if (wrId) {
      fetchData(wrId);
    }
  }, [wrId]);
  
  return state;
}

export function useSearchData(searchQuery, triggerSearch) { 
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    if (!triggerSearch) return; 
    
    const fetchData = async () => {
      dispatch({ type: FETCH_START });
      try {
        const response = await axios.get(`/php/gnuboard5/bbs/search.php?sfl=wr_subject%7C%7Cwr_content&sop=and&gr_id=&srows=100&onetable=&page=&stx=${searchQuery}`, {
          headers: {
            'Access-Control-Allow-Origin': '*',
          },
          crossDomain: true,
        });
        const searchResults = response.data;
        const parsedHtml = parse(searchResults, {
          replace: (domNode) => {
            if (domNode.name === 'hr') {
              return <></>
            }
            if (domNode.name === 'ul' && domNode.attribs.id === 'sch_res_board') {
              return <></>
            }
          }
        })

        dispatch({ type: SEARCH_SUCCESS, payload: parsedHtml });
      } catch (error) {
        console.log(error);
        dispatch({ type: FETCH_ERROR, payload: error.message });
      }
    }
    fetchData()
  }, [searchQuery, triggerSearch]);

  return state;
}