import Field from "@/app/component/element/Field";
import { formatPhoneNumber, validatePhoneNumber } from "@/helper";
import { Button, InputAdornment } from "@mui/material";
import Link from "next/link";
import { useState } from "react";

function LogInPage({ setIsSendMsg, setStep }) {
  const [num, setNum] = useState("");
  const [error, setError] = useState({ valid: true, text: '' });

  const handleChange = (val) => {
    !error.valid && setError({ ...error, valid: true });
    const formatted = formatPhoneNumber(val);
    setNum(formatted);
  };

  return (
    <div
      className="rounded-[16px] mt-[64px] opacity-page sm:mt-[32px] border border-solid sm:border-[#EFEFEF] bg-transparent sm:bg-[#FFF] 
        p-0 border-transparent sm:p-[40px] sm:pb-[48px] w-full sm:w-fit sm:min-w-[425px]"
    >
      <p className="text-[#525252] text-[18px] font-bold">
        ورود یا ثبت نام در نوبت 724
      </p>
      <p className="text-[#616161] text-[14px] mt-[40px] sm:mt-[43px] md:mt-[46px] lg:mt-[48px] font-normal">
        شماره همراه خود را وارد نمایید.
      </p>
      <div className="mt-[16px] sm:mt-[19px] md:mt-[22px] lg:mt-[24px] mb-[19px] sm:mb-[16px] md:mb-[15px] lg:mb-[11px]">
        <Field
          dir="ltr"
          value={num}
          type="string"
          error={!error.valid}
          spaceNull={true}
          inputProps={{
            startAdornment:
              <InputAdornment
                className="!ml-4"
                position="start"
                sx={{
                  '.MuiTypography-root': {
                    lineHeight: '0 !important',
                  },
                  '.muirtl-1qj5e5k-MuiTypography-root': {
                    color: '#000000de !important'
                  }
                }}
              >09</InputAdornment>,
          }}
          title="شماره همراه"
          updateState={handleChange}
        />
        <p className={`
          text-[#d32f2f] text-[14px] mt-2 min-h-[21px] transition-all duration-1000 ease-in-out
            transform
            ${error.valid ? 'opacity-0 -translate-y-1' : 'opacity-100 translate-y-0'}
        `}>{error.text}</p>
      </div>
      <Button
        fullWidth
        variant="contained"
        onClick={() => {
          const checkedNum = validatePhoneNumber(num);
          if (!checkedNum.valid) {
            setError(checkedNum);
            return;
          }
          setIsSendMsg && setIsSendMsg(true);
          setStep && setStep((prev) => prev + 1);
        }}
        className="!rounded-[8px] !bg-[#5559CE] !py-[7.5px] md:!py-[8.5px] lg:!py-[10px]"
      >
        ورود
      </Button>
      <p className="text-[#525252] text-[14px] font-normal text-center mt-[49px] sm:mt-[58px] md:mt-[67px] lg:mt-[76px]">
        <Link href="/">
          <span className="text-[#F17732] underline">قوانین استفاده</span>
        </Link>{" "}
        از نوبت 724 را می پذیرم.
      </p>
    </div>
  );
}

export default LogInPage;