const SideMenu = ({ clearChat, currentModel, setCurrentModel, models, setTemperature, temperature }) =>
<aside className="sidemenu">
  <div className="ai-logo-container">
    <img className="ai-logo" alt="Ai-pro logo" src="../assets/images/chatgpt-aipro.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