import React, { useState, useEffect } from "react";
import { AtomCardContainer } from "native/atoms/CardContainer";
import { AtomIcon } from "native/atoms/Icon";
import { AtomHeadline } from "native/atoms/Typography/Headline";
import { AtomBody } from "native/atoms/Typography/Body";
import { AtomButtonDefault } from "native/atoms/Buttons/Default";
import { AtomButtonGhost } from "native/atoms/Buttons/Ghost";
import { ReadReferralContainer, ButtonsContainer } from "./styles";
import { AtomInputText } from "native/atoms/Input/InputText";
import { theme } from "data/dataMx";
import { View } from "react-native";

export interface IReadReferralProps {
  handleClick: (code: string) => void;
  skipFunction: () => void;
  headline?: string;
  text?: string;
  referredCode?: string;
}

export const OrganismReadReferralCode = ({
  headline = "Invited by a friend?",
  text = "Enter their code for 250 points. If not “Skip” to continue. ",
  referredCode = "",
  handleClick,
  skipFunction,
}: IReadReferralProps) => {
  const [code, setCode] = useState<string>(referredCode);

  useEffect(() => {
    setCode(referredCode);
  }, [referredCode]);

  return (
    <AtomCardContainer
      height="auto"
      width="100%"
      managePadding="45px 31px 27px"
      justifyContent="space-around"
      alignItems="center"
      styles={{ width: "fit-content" }}
    >
      <AtomIcon name={"earn_invite"} size={45} />
      <ReadReferralContainer>
        <AtomHeadline
          size={"medium"}
          text={headline}
          color={"primary400"}
          weight="regular"
          styles={{
            marginBottom: "20px",
            marginTop: "20px",
            fontSize: 24,
            fontWeight: 500,
            lineHeight: 32,
          }}
        />
        <View>
          <AtomBody
            size={"xlarge"}
            color={"neutral700"}
            text={text}
            styles={{ marginBottom: "20px" }}
          />
        </View>
        <AtomInputText
          value={code}
          onChange={(e) => setCode(e)}
          placeholder="Code (XY-0000)"
          styles={{ width: "80%", borderRadius: 4, fontSize: 16 }}
          placeholderTextColor={theme.neutral500}
        />
      </ReadReferralContainer>
      <ButtonsContainer>
        <AtomButtonGhost
          testID="skip"
          disabled={false}
          color={"primary"}
          text={"Skip"}
          width="110px"
          size="medium"
          onPress={() => skipFunction()}
          styles={{ marginRight: 15 }}
        />
        <AtomButtonDefault
          testID="redeem"
          disabled={false}
          color={"primary"}
          text={"Redeem"}
          width="110px"
          size="medium"
          onPress={() => handleClick(code)}
        />
      </ButtonsContainer>
    </AtomCardContainer>
  );
};
