import React from 'react';
import DOMPurify from 'dompurify';
import styles from '../style';
import TextDivider from './TextDivider';

const StepThreeJoblisting = ({ formData, prevStep }) => {
  // Funkcja do przetwarzania HTML i dodawania klas
  const processHTML = (htmlString) => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlString, 'text/html');

    // Dodaj klasy do tagów h1, h2, ..., h6
    doc.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(tag => {
      tag.classList.add('no-tailwindcss-base');
    });

    // Dodaj klasy do tagów ol, ul
    doc.querySelectorAll('ol, ul').forEach(tag => {
      tag.classList.add('no-tailwindcss-base');
    });
    doc.querySelectorAll('li').forEach(tag => {tag.classList.add('lista')})
    return doc.body.innerHTML;
  };

  // Sanituj i przetwórz dane
  const cleanAndProcessData = (userInput) => {
    const sanitizedHTML = DOMPurify.sanitize(userInput);
    return processHTML(sanitizedHTML);
  };

  // Przykład renderowania przetworzonej treści jako komponentów React
  const renderContent = (htmlString) => {
    return <div dangerouslySetInnerHTML={{ __html: cleanAndProcessData(htmlString) }} />;
  };

  return (
    <div className='text-center'>
      <p className='mt-8 text-[24px] font-poppins font-bold '>
        Wybrałeś opcję {formData.postingOption}
      </p>

      <TextDivider text={`Tak będzie wyglądało Twoje ogłoszenie na liście ogłoszeń`} />

      <div className={`grid grid-cols-4`}>
      <div
        className={`job-listing col-start-2 col-end-4 grid grid-cols-4 drop-shadow cursor-pointer mb-2 sm:mr-4 mr-0 text-xl font-bold border rounded-[10px] p-2 hover:border-l-8 hover:border-zinc-500 duration-300 bg-gray-200`}
        >
        <p className='col-span-3 text-xl text-left tracking-wide'>F.H.U. Januszex</p>
        <p className='place-self-end text-[16px] font-semibold tracking-widest text-slate-800'>12000 PLN - 15000 PLN</p>
        <p className='col-span-4 text-xl text-left tracking-wide'>Starszy Inżynier ds. ciągłości produkcji</p>
        </div>
        <div
        className={`col-start-2 col-end-4 grid grid-cols-4 drop-shadow cursor-pointer mb-2 sm:mr-4 mr-0 text-xl font-bold border rounded-[10px] p-2 hover:border-l-8 hover:border-zinc-500 duration-300 bg-gray-200`}
        >
        <p className='col-span-3 text-base text-left tracking-wide'>{cleanAndProcessData(formData.company_name)}</p>
        {
          formData.requireSalary && (<p className='place-self-end text-[16px] font-semibold tracking-widest text-slate-800'>{cleanAndProcessData(formData.minSalary)} PLN - {cleanAndProcessData(formData.maxSalary)} PLN</p> )
        }
        {
          !formData.requireSalary && (<p className='place-self-end text-xl text-slate-800'></p> )
        }
        <p className='col-span-4 text-xl text-left'>{cleanAndProcessData(formData.name)}</p>
        </div>
      <div
        className={`job-listing2 col-start-2 col-end-4 grid grid-cols-4 drop-shadow cursor-pointer mb-2 sm:mr-4 mr-0 text-xl font-bold border rounded-[10px] p-2 hover:border-l-8 hover:border-zinc-500 duration-300 bg-gray-200`}
        >
        <p className='col-span-3 text-xl text-left tracking-wide'>Papieżeks Sp. z o. o.</p>
        <p className='place-self-end text-[16px] font-semibold tracking-widest text-slate-800'>9000 PLN - 12000 PLN</p>
        <p className='col-span-4 text-xl text-left tracking-wide'>Konstruktor - inżynier mechanik</p>
        </div>
      </div>
      <TextDivider text={`Tak będzie się prezentowała treść Twojego ogłoszenia`} />
      <div className='grid grid-cols-5 mt-4 mb-4'>
        <div className='col-span-3 col-start-2 bg-gray-100 text-justify text-[18px] leading-[1.75rem] p-4 rounded-xl'>
          {renderContent(formData.content)}
        </div>
      </div>
      <button 
        type="button" 
        onClick={prevStep} 
        className='h-12 w-72 rounded-xl bg-gray-700 font-poppins font-semibold text-[14px] text-white hover:scale-125 duration-300 mb-5'>
        <span className='text-[18px]'>←</span>&nbsp;&nbsp;Przejdź do poprzedniego kroku
      </button>
    </div>
  );
}

export default StepThreeJoblisting;