x1.js

import React, {useState} from 'react';
import {SketchPicker} from 'react-color';
import Canvas3D from './Canvas3D';
import contreplaque from './contreplaque.jpg';
import okoume from './okoume.jpg';
import '../styles/App.scss';

const useObjectState = (initial) => {
  const [state, setState]  = React.useState(initial);

  const merge = React.useCallback((update) => {
    setState(previous => ({
      ...previous,
      ...typeof update === 'function' ? update(previous) : update
    }));
  }, []);

  return [state, merge];
}


const Grid = (props) => {
  return ( <>
  <div className="center titre_box">{props.titre}</div>
  <div className="flex_c">
    <div className="flex_r flex_wr">
      {props.elements.map((a, i) => {
        return (
          <div className="box_quadralab">{a}</div>
        )
      })}
    </div>
  </div>
</>)
}

const diffuseurInit = {
  forme : {
    rangee: 7,
    epaisseur: 0.003,
    largeurC: 0.068,
    largeurP: 0.100,
    get longueurP() {
      return ((this.rangee * this.largeurC) + ((this.rangee - 1) * this.epaisseur))
    },
    largeurP: 0.100,
    nbCarreaux: new Array(49).fill(0).map((d, id) => ({id})),
    nbPeignes: new Array(12).fill(0).map((d, id) => ({id})),
    sequence: [ 3, 5, 2, 1, 2, 5, 3, 5, 0, 4, 3, 4, 0, 5, 2, 4, 1, 0, 1, 4, 2, 1, 3, 0, 6, 0, 3, 1, 2, 4, 1, 0, 1, 4, 2, 5, 0, 4, 3, 4, 0, 5, 3, 5, 2, 1, 2, 5, 3 ],
    get profondeur() {
      return (this.sequence.map((a, i) => {
        return a * (this.largeurP / Math.max(...this.sequence))
      }))
    }
  },
  couleur : {
    avant: "none",
    arriere: "none",
    bothSide: false
  },
  matiere : contreplaque,
  accroche : true,

}

const couleurInit = {
  avant: "none",
  arriere: "none",
  bothSide: false
};

const Quadralab = (props) => {


  const [diffuseur, setDiffuseur] = useState(diffuseurInit);
  const [tab, setTab] = useState("matiere");
  const [forme, setForme] = useState(diffuseur.forme);
  const [couleur, setCouleur] = useState(couleurInit);
  const [matiere, setMatiere] = useState(contreplaque);
  const [visible, setVisible] = useState(true);

  const merge = React.useCallback((update) => {
    setDiffuseur(previous => ({
      ...previous,
      ...typeof update === 'function' ? update(previous) : update
    }));
  }, []);

  const largeur100 = <button onClick={() => merge({forme.largeurP: 0.100})}> Largeur 10cm </button> ;
  const largeur150 = <button onClick={() => merge({largeurP: 0.150})}> Largeur 15cm </button> ;
  const largeur200 = <button onClick={() => merge({largeurP: 0.200})}> Largeur 20cm </button> ;

  const M_okoume = <button onClick={() => setMatiere(okoume)}> Okoume </button>;
  const M_contreplaque=<button onClick={() => setMatiere(contreplaque)}> Peuplier </button>;

  const M_couleur = <button onClick={() => setCouleur(prevCouleur => ({ ...prevCouleur, avant: "blue" }))}> Couleur bleue </button>;

  return (<div id="quadralab" className="flex_r fullsize ">
    <div className="w60 megafull">
      <Canvas3D forme={forme} couleur={couleur} matiere={matiere} accroche={visible}></Canvas3D>
    </div>
    <div className="w40 megafull flex_c quadraparam">
      <div className="flex_r">
        <i className="fas fa-cubes quadricon" onClick={() => setTab("matiere")}></i>
        <i className="fas fa-paint-brush quadricon" onClick={() => setTab("couleur")}></i>
        <i className="fas fa-expand quadricon" onClick={() => setTab("profondeur")} ></i>
        <i className="fas fa-screwdriver quadricon" onClick={() => setTab("options")}></i>
        <i className="far fa-address-card quadricon" onClick={() => setTab("logo")}></i>
      </div>

      {tab === "matiere" ?
<Grid titre="Matière du diffuseur" elements={[M_okoume, M_contreplaque]}></Grid>
        : null}
      {tab === "couleur" ?
<Grid titre="Couleur du diffuseur" elements={[M_couleur]}></Grid>
        : null}
      {tab === "profondeur" ?
<Grid titre="Profondeur du diffuseur" elements={[largeur100, largeur150, largeur200]}></Grid>
        : null}
      {tab === "options" ?
<Grid titre="Matière du diffuseur" elements={[M_okoume, M_contreplaque]}></Grid>
        : null}
      {tab === "logo" ?
<Grid titre="Matière du diffuseur" elements={[M_okoume, M_contreplaque]}></Grid>
        : null}



      {/** <div height="100px">
        <button onClick={() => setForme(prevForme => ({
            ...prevForme,
            largeurP: 0.100
          }))}>
          LargeurP 10cm
        </button>
        <button onClick={() => setForme(prevForme => ({
            ...prevForme,
            largeurP: 0.200
          }))}>
          Largeur P 20cm
        </button>
        <button onClick={() => setForme(prevForme => ({
            ...prevForme,
            largeurP: 0.150
          }))}>
          Largeur P 15cm
        </button>
        <p>Couleur

          <button onClick={() => setCouleur(prevCouleur => ({
              ...prevCouleur,
              avant: "blue"
            }))}>
            Couleur bleue
          </button>
          <button onClick={() => setCouleur(prevCouleur => ({
              ...prevCouleur,
              bothSide: true
            }))}>
            Deux cotés
          </button>
          <button onClick={() => {
              if (couleur.bothSide) {
                setCouleur(prevCouleur => ({
                  ...prevCouleur,
                  avant: "white",
                  arriere: "grey"
                }))
              } else {
                setCouleur(prevCouleur => ({
                  ...prevCouleur,
                  avant: "white",
                }))
              }

            }}>
            Aucune
          </button>
          <SketchPicker color={couleur} onChange={(color) => setCouleur(prevCouleur => ({
              ...prevCouleur,
              avant: color.hex
            }))}/>

        </p>
        <p>Matière

          <button onClick={() => setMatiere(okoume)}>
            Okoume
          </button>
          <button onClick={() => setMatiere(contreplaque)}>
            peuplier
          </button>
        </p>
        <p>Accroche

          <button onClick={() => setVisible(!visible)}>
            Accroche
          </button>
        </p>
        <p>Logo</p>
        <p>Sequence?</p>
      </div> **/
      }
    </div>
  </div>)
}

export default Quadralab;