hunk.code_window: import { FloatingButton } from "./FloatingButton/FloatingButton";
   import { Inline } from "./Inline/inline";
   import { ModalBox } from "./ModalBox/ModalBox";
   import type { InterfaceWithParent, interfaceWithParent, UiConfig } from "./embed-iframe";
   import css from "./embed.css";
   import type { EventData, EventDataMap } from "./sdk-action-manager";
   import { SdkActionManager } from "./sdk-action-manager";
   import allCss from "./tailwind.generated.css?inline";
  
hunk.labels: keep keep keep replace keep keep keep keep keep
hunk.after_edit: import type { InterfaceWithParent, interfaceWithParent, UiConfig, EmbedThemeConfig } from "./embed-iframe";
  
hunk.file_path: packages/embeds/embed-core/src/embed.ts
hunk.type: replace
file: import { noop } from "lodash";
  import { useRouter } from "next/router";
  import { useMemo } from "react";
  import { Controller, useForm } from "react-hook-form";
  
  import { useLocale } from "@calcom/lib/hooks/useLocale";
  import { nameOfDay } from "@calcom/lib/weekday";
  import { Button, EmailField, Form, Label, Select, TextField, TimezoneSelect } from "@calcom/ui";
  
  import type { UserAdminRouterOutputs } from "../server/trpc-router";
  
  type User = UserAdminRouterOutputs["get"]["user"];
  
  type Option<T extends string | number = string> = {
    value: T;
    label: string;
  };
  
  type OptionValues = {
    locale: Option;
    timeFormat: Option<number>;
    timeZone: string;
    weekStart: Option;
    role: Option;
    identityProvider: Option;
  };
  
  type FormValues = Pick<User, "avatar" | "name" | "username" | "email" | "bio"> & OptionValues;
  
  export const UserForm = ({
    defaultValues,
    localeProp = "en",
    onSubmit = noop,
    submitLabel = "save",
  }: {
    defaultValues?: Pick<User, keyof FormValues>;
    localeProp?: string;
    onSubmit: (data: FormValues) => void;
    submitLabel?: string;
  }) => {
    const router = useRouter();
    const { t } = useLocale();
  
    const localeOptions = useMemo(() => {
      return (router.locales || []).map((locale) => ({
        value: locale,
        label: new Intl.DisplayNames(locale, { type: "language" }).of(locale) || "",
      }));
    }, [router.locales]);
  
    const timeFormatOptions = [
      { value: 12, label: t("12_hour") },
      { value: 24, label: t("24_hour") },
    ];
  
    const weekStartOptions = [
      { value: "Sunday", label: nameOfDay(localeProp, 0) },
      { value: "Monday", label: nameOfDay(localeProp, 1) },
      { value: "Tuesday", label: nameOfDay(localeProp, 2) },
      { value: "Wednesday", label: nameOfDay(localeProp, 3) },
      { value: "Thursday", label: nameOfDay(localeProp, 4) },
      { value: "Friday", label: nameOfDay(localeProp, 5) },
      { value: "Saturday", label: nameOfDay(localeProp, 6) },
    ];
  
    const userRoleOptions = [
      { value: "USER", label: t("user") },
      { value: "ADMIN", label: t("admin") },
    ];
  
    const identityProviderOptions = [
      { value: "CAL", label: "CAL" },
      { value: "GOOGLE", label: "GOOGLE" },
      { value: "SAML", label: "SAML" },
    ];
  
    const form = useForm<FormValues>({
      defaultValues: {
        avatar: defaultValues?.avatar,
        name: defaultValues?.name,
        username: defaultValues?.username,
        email: defaultValues?.email,
        bio: defaultValues?.bio,
        locale: {
          value: defaultValues?.locale || localeOptions[0].value,
          label: localeOptions.find((option) => option.value === localeProp)?.label || "",
        },
        timeFormat: {
          value: defaultValues?.timeFormat || 12,
          label: timeFormatOptions.find((option) => option.value === defaultValues?.timeFormat)?.label || "12",
        },
        timeZone: defaultValues?.timeZone || "",
        weekStart: {
          value: defaultValues?.weekStart || weekStartOptions[0].value,
          label: nameOfDay(localeProp, defaultValues?.weekStart === "Sunday" ? 0 : 1),
        },
        role: {
          value: defaultValues?.role || userRoleOptions[0].value,
          label:
            userRoleOptions.find((option) => option.value === defaultValues?.role)?.label ||
            userRoleOptions[0].label,
        },
        identityProvider: {
          value: defaultValues?.identityProvider || identityProviderOptions[0].value,
          label:
            identityProviderOptions.find((option) => option.value === defaultValues?.role)?.label ||
            identityProviderOptions[0].label,
        },
      },
    });
  
    return (
      <Form form={form} className="space-y-4" handleSubmit={onSubmit}>
        {/* TODO: Enable Avatar uploader in a follow up */}
        {/*  <div className="flex items-center">
          <Controller
            control={form.control}
            name="avatar"
            render={({ field: { value } }) => (
              <>
                <Avatar alt="" imageSrc={value} gravatarFallbackMd5="fallback" size="lg" />
                <div className="ml-4">
                  <ImageUploader
                    target="avatar"
                    id="avatar-upload"
                    buttonMsg="Change avatar"
                    handleAvatarChange={(newAvatar) => {
                      form.setValue("avatar", newAvatar, { shouldDirty: true });
                    }}
                    imageSrc={value || undefined}
                  />
                </div>
              </>
            )}
          />
        </div> */}
        <Controller
          name="role"
          control={form.control}
          render={({ field: { onChange, value } }) => (
            <div>
              <Label className="text-default font-medium" htmlFor="role">
                {t("role")}
              </Label>
              <Select<{ label: string; value: string }>
                value={value}
                options={userRoleOptions}
                onChange={onChange}
              />
            </div>
          )}
        />
        <Controller
          name="identityProvider"
          control={form.control}
          render={({ field: { onChange, value } }) => (
            <div>
              <Label className="text-default font-medium" htmlFor="identityProvider">
                {t("identity_provider")}
              </Label>
              <Select<{ label: string; value: string }>
                value={value}
                options={identityProviderOptions}
                onChange={onChange}
              />
            </div>
          )}
        />
        <TextField label="Name" placeholder="example" required {...form.register("name")} />
        <TextField label="Username" placeholder="example" required {...form.register("username")} />
        <EmailField label="Email" placeholder="user@example.com" required {...form.register("email")} />
        <TextField label="About" {...form.register("bio")} />
        <Controller
          name="locale"
          render={({ field: { value, onChange } }) => (
            <>
              <Label className="text-default">
                <>{t("language")}</>
              </Label>
              <Select<{ label: string; value: string }>
                className="capitalize"
                options={localeOptions}
                value={value}
                onChange={onChange}
              />
            </>
          )}
        />
        <Controller
          name="timeZone"
          control={form.control}
          render={({ field: { value } }) => (
            <>
              <Label className="text-default mt-8">
                <>{t("timezone")}</>
              </Label>
              <TimezoneSelect
                id="timezone"
                value={value}
                onChange={(event) => {
                  if (event) form.setValue("timeZone", event.value);
                }}
              />
            </>
          )}
        />
        <Controller
          name="timeFormat"
          control={form.control}
          render={({ field: { value } }) => (
            <>
              <Label className="text-default mt-8">
                <>{t("time_format")}</>
              </Label>
              <Select
                value={value}
                options={timeFormatOptions}
                onChange={(event) => {
                  if (event) form.setValue("timeFormat", { ...event });
                }}
              />
            </>
          )}
        />
        <Controller
          name="weekStart"
          control={form.control}
          render={({ field: { value } }) => (
            <>
              <Label className="text-default mt-8">
                <>{t("start_of_week")}</>
              </Label>
              <Select
                value={value}
                options={weekStartOptions}
                onChange={(event) => {
                  if (event) form.setValue("weekStart", { ...event });
                }}
              />
            </>
          )}
        />
  
        <br />
        <Button type="submit" color="primary">
          {t(submitLabel)}
        </Button>
      </Form>
    );
  };
  