const SideMenu = ({ clearChat, currentModel, setCurrentModel, models, setTemperature, temperature }) =>
<aside className="sidemenu">
  <div className="ai-logo-container">
    <img className="ai-logo" src="../assets/images/AIPRO-WHITE.png" height="50px"/>
  </div>
  <div className="side-menu-button" onClick={clearChat}>
    <span>+</span>
    New Chat
  </div>
  <div className="models">
  <label className="side-label">Model</label>
    <select
      // active if model is select is currentModel
      value={currentModel}
      className="select-models"
      onChange={(e)=>{
      setCurrentModel(e.target.value)
    }}>
      {models && models.length ? models.map((model, index) => (
        <option
          key={model.id}
          value={model.id}>{model.id}</option>
      )) :  <option
              key={"text-davinci-003"}
              value={"text-davinci-003"}>{"text-davinci-003"}</option>}
    </select>

    <Button
      text="Smart - Davinci"
      onClick={()=>setCurrentModel("text-davinci-003")} />
       <Button
      text="Code - Crushman"
      onClick={()=>setCurrentModel("code-cushman-001")} />
    <span className="info">
      The model parameter controls the engine used to generate the response. Davinci produces best results.
     </span>
    <label className="side-label" >Temperature</label>
    <input
      className="select-models"
      type="number"
      onChange={(e)=> setTemperature(e.target.value)}
      min="0"
      max="1"
      step="0.1"
      value={temperature}
     />
     <Button
      text="0 - Logical"
      onClick={()=>setTemperature(0)} />
     <Button
      text="0.5 - Balanced"
      onClick={()=>setTemperature(0.5)} />
     <Button
      text="1 - Creative"
      onClick={()=>setTemperature(1)} />
     <span className="info">
      The temperature parameter controls the randomness of the model. 0 is the most logical, 1 is the most creative.
     </span>
  </div>
</aside>

const Button = ({ onClick, text }) =>
  <div
    className="button-picker"
    onClick={onClick}>
    {text}
  </div>

export default SideMenu