import React, { useEffect, useState } from 'react';
import { Button, DropdownButton, DropdownMenu } from 'react-bootstrap';
import {  } from 'react-usestateref';
import CHScf from '../JSON/CHScf.json';
import CHShf from '../JSON/CHShf.json';
import HE from '../JSON/HE.json';
import IPE from '../JSON/IPE.json';
import LEq from '../JSON/LEq.json';
import LUneq from '../JSON/LUneq.json';
import PSO from '../JSON/Profile_Style_Options.json';
import RHScf from '../JSON/RHScf.json';
import RHShf from '../JSON/RHShf.json';
import SHScf from '../JSON/SHScf.json';
import SHShf from '../JSON/SHShf.json';
import texts from '../JSON/websitetext.json';
import ColoredLine from '../Methods/ColoredLine';
import './BasincHesabi.css';
import TestThree from './TestThree';
import { flushSync } from 'react-dom';

function BasincHesabi() {
  const createMarkup = (htmlString) => ({ __html: htmlString });

  const Letter_Info_Writer = (letter_exp) => {
    return `${letter_exp.Letter}<sup>${letter_exp.Upper}</sup><sub>${letter_exp.Lower}</sub> : ${letter_exp.Text}`;
  };

  var [selectedOption, setSelectedOption] = useState("HE");
  var [selectedProfile, setSelectedProfile] = useState("HE 100 A");


  const handleOptionChange = (e) => {
    setSelectedOption(e.target.value);
     debugger;
    switch (selectedOption) {
      case "HE":
        setSelectedProfile(HE[0].Profile);
        break;
      case "IPE":
        setSelectedProfile(IPE[0].Profile);
        break;
      case "LEq":
        setSelectedProfile(IPE[0].Profile);
        break;
      case "LUneq":
        setSelectedProfile(IPE[0].Profile);
        break;
      case "CHScf":
        setSelectedProfile(CHScf[0].Profile);
        break;
      case "CHShf":
        setSelectedProfile(CHShf[0].Profile);
        break;
      case "RHScf":
        setSelectedProfile(RHScf[0].Profile);
        console.log("sec123 prof:", selectedProfile)
        break;
      case "RHShf":
        setSelectedProfile(RHShf[0].Profile);
        break;
      case "SHScf":
        setSelectedProfile(SHScf[0].Profile);
        break;
      case "SHShf":
        setSelectedProfile(SHShf[0].Profile);
        break;
  }};

  const handleProfileChange = (e) => {
      setSelectedProfile(e.target.value);
    console.log(selectedProfile)
  };

 
  const handleProfileType = (selectedOption) => {
    switch (selectedOption) {
      case "HE":
        return HE.map(element => <option key={element.Profile} value={element.Profile}>{element.Profile}</option>);
      case "IPE":
        return IPE.map(element => <option key={element.Profile} value={element.Profile}>{element.Profile}</option>);
      case "LEq":
        return LEq.map(element => <option key={element.Profile} value={element.Profile}>{element.Profile}</option>);
      case "LUneq":
        return LUneq.map(element => <option key={element.Profile} value={element.Profile}>{element.Profile}</option>);
      case "CHScf":
        return CHScf.map(element => <option key={element.Profile} value={element.Profile}>{element.Profile}</option>);
      case "CHShf":
        return CHShf.map(element => <option key={element.Profile} value={element.Profile}>{element.Profile}</option>);
      case "RHScf":
        return RHScf.map(element => <option key={element.Profile} value={element.Profile}>{element.Profile}</option>);
      case "RHShf":
        return RHShf.map(element => <option key={element.Profile} value={element.Profile}>{element.Profile}</option>);
      case "SHScf":
        return SHScf.map(element => <option key={element.Profile} value={element.Profile}>{element.Profile}</option>);
      case "SHShf":
        return SHShf.map(element => <option key={element.Profile} value={element.Profile}>{element.Profile}</option>);
    }
  };

  return (
    <div>
      <div className='row'>
        <div className='col-lg-4 col-md-12 text-start p-3'>
          <div dangerouslySetInnerHTML={createMarkup(Letter_Info_Writer(texts['s-1']))}></div>
          <div dangerouslySetInnerHTML={createMarkup(Letter_Info_Writer(texts.B1))}></div>
          <div dangerouslySetInnerHTML={createMarkup(Letter_Info_Writer(texts["b-1"]))}></div>
          <div dangerouslySetInnerHTML={createMarkup(Letter_Info_Writer(texts['Vr-1']))}></div>
        </div>
        <div className='col-lg-4 col-md-12 text-start p-3'>
          <div dangerouslySetInnerHTML={createMarkup(Letter_Info_Writer(texts["H-3"]))}></div>
          <div dangerouslySetInnerHTML={createMarkup(Letter_Info_Writer(texts["H-2"]))}></div>
          <div dangerouslySetInnerHTML={createMarkup(Letter_Info_Writer(texts['a-4']))}></div>
        </div>
        <div className='col-lg-4 col-md-12 text-start p-3'>
          <div dangerouslySetInnerHTML={createMarkup(Letter_Info_Writer(texts.alpha))}></div>
          <div dangerouslySetInnerHTML={createMarkup(Letter_Info_Writer(texts.xussucizgi))}></div>
          <div dangerouslySetInnerHTML={createMarkup(Letter_Info_Writer(texts['Fu-1']))}></div>
        </div>
      </div>
      <ColoredLine color="green" />
      <div className='row'>
        <div className='col-lg-4 col-md-4' id='canvas2'>
          <TestThree profileStyle={selectedOption} selectedProfile={selectedProfile} />
        </div>
        <div className='col-lg-4 col-md-4' id='canvas1'>
          <div className='row'>
            <div className='col-4'>
              <select
                className='dropdown'
                bsStyle="default"
                bsSize="small"
                title="ProfileType"
                id='dropdown-size-small'
                value={selectedOption}
                onChange={handleOptionChange}
              >
                {PSO.map((element, index) => (
                  <option key={index} value={element}>{element}</option>
                ))}
              </select>
            </div>
            <div className='col-4'>
              <select
                className='dropdown'
                bsStyle="default"
                bsSize="small"
                title="ProfileType"
                key={1}
                id='dropdown-size-small'
                onChange={handleProfileChange}
              >
                {handleProfileType(selectedOption)}
              </select>
            </div>
            <div className='col-4'>
              <button/>
            </div>
          </div>
        </div>
        <div className='col-lg-4 col-md-4'></div>
      </div>
    </div>
  );
}

export default BasincHesabi;