import { useState } from "react"
import { Button } from "../../ui-component/button/button.component"
import { Input } from "../../ui-component/input/input.component"
import styles from "./user-sign-up.styles.module.css"
import { Checkbox } from "../../ui-component/checkbox/checkbox.component"
import { Icon } from "../../ui-component/icon/icon.component"
import PhoneInput from "react-phone-input-2"
import "react-phone-input-2/lib/style.css"
import { Welcome } from "./welcome.component"
import { useModal } from "../../ui-component/modal"

export function UserSignUpCompany({
  goBack,
}: {
  goBack: (value: string) => void
}) {
  // ---------------------------------------------------------------------------
  // states
  // ---------------------------------------------------------------------------
  const modal = useModal()

  const [mode, setMode] = useState<
    "name" | "post" | "email" | "password" | "congratulation"
  >("name")

  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  function onBack(step: string) {
    if (step === "name") {
      goBack(mode)
    } else if (step === "post") {
      setMode("name")
    } else if (step === "email") {
      setMode("post")
    } else if (step === "password") {
      setMode("email")
    } else if (step === "congratulation") {
      setMode("password")
    }
  }

  const getUnderlineColor = (index: number) => {
    if (mode === "name") {
      return index === 1 ? "#5807C9" : "#E9D5FC"
    } else if (mode === "post") {
      return index === 2 ? "#5807C9" : "#E9D5FC"
    } else if (mode === "email") {
      return index === 3 ? "#5807C9" : "#E9D5FC"
    } else if (mode === "password") {
      return index === 4 ? "#5807C9" : "#E9D5FC"
    }
  }

  // ---------------------------------------------------------------------------
  return (
    <>
      <div
        className={styles.backIconWrap}
        onClick={() => {
          onBack(mode)
        }}
      >
        <Icon
          name="fal fa-chevron-left"
          className={styles.backIcon}
          size="auto"
        />
        <p className={styles.backIconText}>Back</p>
      </div>
      {/* --------------------------------------------------------------------------- */}
      {/* COMPANY NAME AND URL FOR COMPANY */}
      {/* --------------------------------------------------------------------------- */}
      <div className={styles.titleUnderlineWrap}>
        {[...Array(5)].map((_, index) => (
          <div
            key={index}
            className={styles.titleUnderline}
            style={{
              backgroundColor: getUnderlineColor(index),
            }}
          />
        ))}
      </div>
      {mode === "name" && (
        <>
          <div className={styles.input}>
            <Input
              mode="primary"
              placeholder="Company"
              value={""}
              autofocus={true}
              onValueChange={() => {}}
            />
            <Input
              mode="primary"
              placeholder="URL"
              value={""}
              autofocus={true}
              onValueChange={() => {}}
            />
          </div>
          <Button className={styles.nextButton} onClick={() => setMode("post")}>
            Next
          </Button>
        </>
      )}

      {/* --------------------------------------------------------------------------- */}
      {/* NAME AND POST */}
      {/* --------------------------------------------------------------------------- */}

      {mode === "post" && (
        <>
          <div className={styles.input}>
            <Input
              mode="primary"
              placeholder="Contact person"
              value={""}
              autofocus={true}
              onValueChange={() => {}}
            />
            <Input
              mode="primary"
              placeholder="Post"
              value={""}
              autofocus={true}
              onValueChange={() => {}}
            />
          </div>
          <Button
            className={styles.nextButton}
            onClick={() => setMode("email")}
          >
            Next
          </Button>
        </>
      )}

      {/* --------------------------------------------------------------------------- */}
      {/* EMAIL AND PHONE NUMBER */}
      {/* --------------------------------------------------------------------------- */}

      {mode === "email" && (
        <>
          <div className={styles.input}>
            <Input
              mode="primary"
              type="email"
              placeholder="Email"
              value={""}
              autofocus={true}
              onValueChange={() => {}}
            />

            <PhoneInput
              inputStyle={{
                height: "4.8rem",
                backgroundColor: "#f6f2fa",
                width: "100%",
                borderRadius: "1.5rem",
                border: "1px solid none",
              }}
              country={"us"}
              value={""}
              onChange={() => {}}
            />
          </div>
          <Button
            className={styles.nextButton}
            onClick={() => setMode("password")}
          >
            Next
          </Button>
        </>
      )}

      {/* --------------------------------------------------------------------------- */}
      {/* PASSWORD */}
      {/* --------------------------------------------------------------------------- */}

      {mode === "password" && (
        <>
          <div className={styles.input}>
            <Input
              mode="primary"
              type="password"
              placeholder="Create a password"
              value={""}
              autofocus={true}
              onValueChange={() => {}}
            />
            <Input
              mode="primary"
              type="password"
              placeholder="Repeat password"
              value={""}
              autofocus={true}
              onValueChange={() => {}}
            />
          </div>
          <Button
            className={styles.nextButton}
            onClick={() =>
              modal.open({
                component: <Welcome isCompany={true} />,
                width: "80rem",
              })
            }
          >
            Done
          </Button>
          <div className={styles.term}>
            <Checkbox checked={false} color="#07C96C" />
            <span>
              I agree to the processing of personal data in accordance with the
              <span className={styles.privacy}>privacy policy</span>
            </span>
          </div>
        </>
      )}
    </>
  )
}
please implement me good validation here