import React, { useMemo, useState } from "react";
import { View } from "react-native";
import ETextInput, { ETextInputBorder } from "@components/ETextInput";
import EFullButton from "@components/EButton";
import EText, { ECaptionText, ELabelText, ETitleText } from "@components/EText";
import ENavButtons from "@components/ENavButtons";

// implement logic here later.
export default function CreatePassword(props: any) {
  const [password, setPassword] = useState<string>("");
  const [validation, setValidation] = useState<string>("");
  const [visible, setVisible] = useState<boolean>(true);
  const border = useMemo(() => {
    if (password.length === 0 && validation.length === 0)
      return ETextInputBorder.Nothing;
    if (validation !== password) return ETextInputBorder.Fail;
    if (validation.length >= 8) return ETextInputBorder.Success;
    return ETextInputBorder.Fail;
  }, [password, validation]);
  return (
    <>
      <View
        style={{
          flex: 1,
          flexDirection: "column",
        }}
      >
        <ENavButtons back={true} />
        <View style={{ flexDirection: "column", marginTop: 0 }}>
          <View style={{ marginBottom: 24 }}>
            <ETitleText style={{ marginBottom: 8 }}>
              비밀번호 설정하기
            </ETitleText>
            <EText>
              비밀번호를 설정해주세요. 영문, 숫자를 조합한 8자 이상으로
              만들어주세요
            </EText>
          </View>
          <View style={{ rowGap: 8 }}>
            <ELabelText>비밀번호</ELabelText>
            <ETextInput
              border={border}
              placeholder=""
              value={password}
              setValue={setPassword}
              passwordHidden={visible}
              setPasswordHidden={setVisible}
            />
            <ETextInput
              border={border}
              placeholder="비밀번호 다시 입력하기"
              value={validation}
              setValue={setValidation}
              passwordHidden={visible}
              setPasswordHidden={setVisible}
            />
            {border === ETextInputBorder.Nothing && (
              <ECaptionText>
                영문/숫자 조합 8자 이상으로 만들어주세요
              </ECaptionText>
            )}
            {border === ETextInputBorder.Fail && (
              <>
                <ECaptionText error={true}>
                  영문/숫자 조합 8자 이상으로 만들어주세요
                </ECaptionText>
                <ECaptionText error={true}>
                  비밀번호가 일치하는지 확인해주세요
                </ECaptionText>
              </>
            )}
          </View>
        </View>
        <EFullButton
          style={{ marginTop: 24 }}
          text="비밀번호 설정하기"
          active={border == ETextInputBorder.Success}
        />
      </View>
    </>
  );
}