import { html, nothing } from "lit";
import salutLogo from "../../../../UI/images/Salut_Logotip.svg";
import { PrimariaShellHeader } from "./shell-header";
import { when } from "lit/directives/when.js";
import { translate } from "../../../../locales";

export const template = (props: PrimariaShellHeader) => {
  const workCenterElements = [{ label: props.professional?.workCenter, value: "1" }];
  const roleElements = [{ label: props.professional?.role, value: "1" }];
  const specialityElements = [{ label: props.professional?.speciality, value: "1" }];

  return html`
  <div class="header">
    <div class="header__left">
      <div class="header-logo">
        <img src=${salutLogo} alt="logo" />
      </div>
      <header-divider></header-divider>
      <div id="header-region-container"></div>
    </div>
    <div class="header__right">
      <div id="header-actions-region-container"></div>
      <header-divider></header-divider>
      ${when(
        props.professional,
        () => html`<dss-header-menu-professional tooltipFixed @onExit=${props.logout} slot="professional-menu" name="${props.professional.firstName} ${props.professional?.familyName} ${props.professional?.lastName}" center="${props.professional.workCenter}" collegiate="${props.professional.registrationNumber}">
        <dss-avatar size="xl" name="${props.professional.firstName}" surname="${props.professional?.familyName}" slot="avatar"></dss-avatar>
        <dss-input-dropdown icon="maps_home_work" type="default" .elements=${workCenterElements} selectedvalue="[&quot;1&quot;]">
            <label slot="label" for="preferences1">${translate("header.workCenter")}</label>
            <input id="preferences1" slot="input" type="text" class="dss-input" readonly="">
        </dss-input-dropdown>
        <dss-input-dropdown icon="business_center" type="default" .elements=${roleElements} selectedvalue="[&quot;1&quot;]">
          <label slot="label" for="preferences2">${translate("header.role")}</label>
          <input id="preferences2" slot="input" type="text" class="dss-input" readonly="">
        </dss-input-dropdown>
        <dss-input-dropdown icon="people_alt" type="default" .elements=${specialityElements} selectedvalue="[&quot;1&quot;]">
          <label slot="label" for="preferences3">${translate("header.speciality")}</label>
          <input id="preferences3" slot="input" type="text" class="dss-input" readonly="">
        </dss-input-dropdown>
      </dss-header-menu-professional>`,
      )}
    </div>
  </div>
`;
};