import a,{useState as T}from"react";import C from"styled-components";import{Button as o}from"@redocly/theme/components/Button/Button";import{isEmailValid as x}from"../../pages/DevLogin/utils";import{DEFAULT_AUTHENTICATED_TEAM as n}from"../../../../constants/common";import{TeamsSelector as g}from"./styled";function F({teams:s,formState:{values:t,errors:l},setFormState:m,onSubmit:d}){const[u,p]=T([]),f=()=>m({values:t,errors:void 0}),c=()=>{t?.email&&x(t.email)?(d(),l&&f()):m({values:t,errors:{...l,email:"Please enter a correct email"}})},h=({target:e})=>{m({errors:l,values:{...t,[e.name]:e.value}})},E=({target:e})=>{const i=[...t?.teams||[],e.name];e.checked?m({errors:l,values:{...t,teams:i}}):m({errors:l,values:{...t,teams:t.teams?.filter(k=>k!==e.name)}})},b=e=>{e.preventDefault(),c()},y=()=>{const e=prompt("Enter custom team name");e&&p(i=>[...i,e])};return a.createElement("form",{id:"main_form",onSubmit:b},a.createElement("div",{className:"email-screen"},a.createElement("span",{className:"label","data-cy":"email-input-label"},"Email address"),a.createElement("input",{type:"email",id:"email",name:"email",autoFocus:!0,value:t?.email||"",onChange:h,"data-cy":"email-input",className:l?.email?"error":""}),l?.email&&a.createElement("span",{id:"email-screen-email-error",className:"email-error-block","data-cy":"incorrect-email-error"},l.email),a.createElement(a.Fragment,null,a.createElement("span",{className:"label","data-cy":"email-input-label"},"Select teams"),a.createElement(g,null,s.concat(u).map(e=>a.createElement(r,{key:e},a.createElement("input",{type:"checkbox",name:e,id:e,checked:t?.teams?.includes(e)||!1,onChange:E}),a.createElement("label",{htmlFor:e},e))),a.createElement(r,{key:n},a.createElement("input",{type:"checkbox",name:n,id:n,disabled:!0,checked:!0}),a.createElement("label",{htmlFor:n,title:"This team is enabled for all authenticated users by default"},n)),a.createElement(o,{type:"button",size:"small",fullWidth:!0,onClick:y},"+ Add custom team"))),a.createElement(o,{fullWidth:!0,size:"large",variant:"primary",onClick:c,"data-cy":"log-in-button"},"Login")))}const r=C.div`
  display: flex;
  overflow: hidden;

  & > input[type='checkbox'] {
    width: 14px;
  }
  & > label {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
`;export{F as DevLoginForm};
