import { useEffect, useState } from 'react'
import propTypes from 'prop-types';
import MaximumLength from '@ckeditor/ckeditor5-react'
import { categories, experience_levels } from '../consts';
import styles from '../style'
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ImageUpload from './ImageUpload';
import SkillsSelector from './SkillsSelector';
import Salary from './Salary';
import { placeholderImage } from '../assets';
import Button from './Button';
const StepTwoJoblisting = ({ nextStep, prevStep, handleChange, formData, setFormData, removeFields, skills }) => {
    const [editorData, setEditorData] = useState('');
    const [imageSrc, setImageSrc] = useState(placeholderImage);
    const max_words = 500;
    const countWords = (text) => {
        return text.split(/\s/).filter(function(n) { return n != '' }).length;
    }

    const validateForm2 = () => { 
        const { name, company_name, localization, content, min_salary, max_salary, work_from_home, employment_type, image, skill_levels } = formData;
        if (!name || !company_name || !localization || !content || !min_salary || !max_salary || !work_from_home || !employment_type || !image || !skill_levels) {
            return true;
        }
    }
    useEffect(() => {
        if (formData.content) {
            console.log(countWords(formData.content))
            if (countWords(formData.content) > max_words) {
                alert('Maksymalna liczba słów wynosi 500')
            }
        }
        
    }, [formData.content])

    const handleNextStep = () => {
        if (validateForm()) {
            console.log(errors)
            nextStep(); // Przejście do następnego kroku
        } else {
            alert('Proszę wypełnić wszystkie wymagane pola.'); // Wyświetl komunikat o błędzie
        }
    };
    const errorStyleInput = 'border-red-600'
    const [errors, setErrors] = useState({});
    const validateForm = () => {
        let newErrors = {};
        if (countWords(formData.content) > max_words) {
            newErrors.content = 'Maksymalna liczba słów wynosi 600';
        }
        // Sprawdź każde wymagane pole
        if (!formData.name) {
          newErrors.name = 'To pole jest wymagane';
        }
        if (!formData.company_name) {
            newErrors.company_name = 'To pole jest wymagane';
          }
        if (!formData.localization) {
            newErrors.localization = 'To pole jest wymagane';
        }
        if (!formData.content) {
            newErrors.content = 'To pole jest wymagane';
        }
        console.log(formData.require_salary)
        if (formData.require_salary === true)
        {
            console.log(formData.require_salary)
            if (!formData.min_salary) {
                newErrors.min_salary = 'To pole jest wymagane';
            }
            if (!formData.max_salary) {
                newErrors.max_salary = 'To pole jest wymagane';
            }
        }
       
        if (!formData.work_from_home) {
            newErrors.work_from_home = 'To pole jest wymagane';
        }
        if (!formData.employment_type) {
            newErrors.employment_type = 'To pole jest wymagane';
        }
        if (!formData.image) {
            newErrors.image = 'To pole jest wymagane';
        }
        if (Object.keys(formData.skill_levels).length === 0) {
            newErrors.skill_levels = 'To pole jest wymagane';
        }
        setErrors(newErrors);

        // Zwróć true, jeśli nie ma błędów
        return Object.keys(newErrors).length === 0;
      };
  return (
    <>
    <div className='grid grid-cols-3'>
        <div className='sm:px-20 px-16 sm:pt-3 pt-6 pb-6 xl:col-span-3 col-span-3'>
            <span className='justify-center'>
            <p className={`${styles.heading1} text-center`}>Dodajesz ogłoszenie z izaac.pl</p>
            </span>
        </div>
      </div>
    
    <div className='no-tailwindcss-base'>
        <div className='mx-auto max-w-none h-[70vh] w-[60vw]'>
        <form action="">
        <div className='grid mb-4'>
        <div className='grid grid-cols-1 sm:grid-cols-3 items-center'>
        <div className={`${styles.paragraph} px-4 py-2`}>Nazwa ogłoszenia
        <span className={`${styles.paragraph} text-red-700`}>*</span></div> 
        <input type="text" 
        name="name" 
        value={formData['name'] || ''}
        required
        id="name"  
        onChange={handleChange('name')}
        placeholder='Wpisz nazwę stanowiska...' 
        className={`border-b-2 px-4 my-2 ${styles.paragraph} 
        col-span-2 ${errors.jobtitle ? errorStyleInput : ''}`}/>

        <div className={`${styles.paragraph} px-4 py-2 `}>Strona internetowa</div> 
        <input type="text" 
        name="webpage" 
        value={formData['webpage'] || ''}
        onChange={handleChange('webpage')}
        id="webpage" 
        placeholder='Wpisz adres strony internetowej...' 
        className={`border-b-2 px-4 my-2  ${styles.paragraph} col-span-2`}/>
        <div className={`${styles.paragraph} px-4 py-2 `}>Adres siedziby
        <span className={`${styles.paragraph} text-red-700`}>*</span></div> 
        <input type="text" 
        name="localization"
        required 
        value={formData['localization'] || ''}
        onChange={handleChange('localization')}
        id="localization" 
        placeholder='Wpisz adres siedziby...' 
        className={`border-b-2 px-4 my-2  ${styles.paragraph} col-span-2`}/>
        <div className={`${styles.paragraph} px-4 py-2 `}>Logo firmy
        <span className={`${styles.paragraph} text-red-700`}>*</span></div>
        <div className='mt-6 col-span-2'>
        <ImageUpload 
        setFormData={setFormData}
        data={formData}
        _setImageSrc={setImageSrc}
        _imageSrc={imageSrc}
        />
        </div>
        </div>
        </div>
        <div className='w-full border-b-2'></div>
        <div className={`${styles.paragraph} px-4 py-2`}>Treść ogłoszenia 
        <span className={`${styles.paragraph} text-red-700`}>*</span></div> 
           <CKEditor
                editor={ClassicEditor}
                data={formData['content'] || ''} 
                required
                // config={{
                //     plugins: [WordCount],
                //     toolbar: ['wordCount'],
                //     wordCount: {
                //         onUpdate: stats => {
                //             console.log(stats.words, stats.characters)
                //         }
                //     }
                   
                // }}
                onChange={(event, editor) => {
                    const data = editor.getData();
                    handleChange('content')(data); // Wywołanie zmodyfikowanej funkcji handleChange
                }}
                onReady={ editor => {
                   // You can store the "editor" and use when it is needed.
                //    console.log( 'Editor is ready to use!', editor );
               } }
               onBlur={ ( event, editor ) => {
                //    console.log( 'Blur.', editor );
               } }
               onFocus={ ( event, editor ) => {
                //    console.log( 'Focus.', editor );
               } }
           />
           <div className='grid grid-cols-3 items-center mt-4'>
            <span className={`${styles.paragraph} col-span-3 px-4`}>Dodaj wybrane umiejętności <span className={`${styles.paragraph} text-red-700`}>*</span></span>
            <div className='col-span-3'>
               <SkillsSelector 
               formData={formData}
               setFormData={setFormData}
               skills={skills}
               />
            </div>
           </div>
           <div className='w-full border-b-2'></div>
           <div className={`${styles.paragraph} px-4 py-2`}>Kategoria ogłoszenia i poziom doświadczenia
            <span className={`${styles.paragraph} text-red-700`}>*</span></div> 
              <div className='grid grid-cols-2 items-center mt-4 mb-4 gap-6'>
              
            <p className='font-poppins font-semibold text-slate-700 text-center text-[14px] mt-1 mb-2'>Wybierz kategorię Twojego ogłoszenia</p>    
            <select 
            value={formData['category'] || 'default' }
            name='category'
            onChange={handleChange('category')}
            className='h-12 border-2 rounded-xl px-5 mx-4 w-full '>
                <option value={'default'} disabled >Wybierz opcję</option>
                {categories.map((category, index) => (
                    <option key={index} value={category.id}>{category.name}</option>
                ))}
            </select>
            
            <p className='font-poppins font-semibold text-slate-700 text-center text-[14px] mt-1 mb-2'>Poziom doświadczenia</p>    
            <select 
            value={formData['experience_level'] || 'default' }
            name='experience_level'
            onChange={handleChange('experience_level')}
            className='h-12 border-2 rounded-xl px-5 mx-4 w-full '>
                <option value={'default'} disabled >Wybierz opcję</option>
                {experience_levels.map((experience_level, index) => (
                    <option key={index} value={experience_level.id}>{experience_level.name}</option>
                ))}
            </select>
            <div>
        </div>
                </div>
           <div className='w-full border-b-2'></div>
           <div className={`${styles.paragraph} px-4 py-2`}>
            Wynagrodzenie 
            <span className={`${styles.paragraph} text-red-700`}>*</span>
            </div> 
           <div className=''>
               <Salary
               removeFields={removeFields}
               setFormData={setFormData}
               handleChange={handleChange} 
               formData={formData}/>
           </div>
       
           <div className={`${styles.flexCenter} py-10 gap-20`}>
            <button 
            type="button" 
            onClick={prevStep} 
            className='h-16 md:h-12 w-80 md:w-72 rounded-xl bg-gray-700 
            font-poppins font-semibold text-[14px] scale-100
             text-white hover:scale-125 duration-300'>
                <span className='text-[18px]'>←</span>&nbsp;&nbsp;
                Przejdź do poprzedniego kroku</button>

            <Button 
            isDiasbled={validateForm2()}
            nextStep={handleNextStep}
            Text="Przejdź do następnego kroku"/>
            

            </div>
       </form>
       </div>
       </div>
       </>
  )
}

StepTwoJoblisting.propTypes = {
    nextStep: propTypes.func,
    prevStep: propTypes.func,
    handleChange: propTypes.func,
    formData: propTypes.object,
    setFormData: propTypes.func,
    removeFields: propTypes.func,
    skills: propTypes.array
}

export default StepTwoJoblisting