import React, { useState } from "react";
import { theme, keysTheme } from "data/dataMx";
import { AtomButtonDefault } from "native/atoms/Buttons/Default";
import { AtomBody } from "native/atoms/Typography/Body";
import { AtomIcon } from "native/atoms/Icon";
import { AtomImage } from "native/atoms/Image";
import { AtomHeadline } from "native/atoms/Typography/Headline";
import { AtomProgressBar } from "native/atoms/ProgressBar";
import {
  CardChallenge,
  CardChallengeInfo,
  CardChallengeImage,
  CardChallengeDescription,
  CardChallengeTitle,
  CardChallengeButton,
  CardChallengeButtonContent,
  CompletedButton,
  IconContainer,
  IconContainerProgress,
  ProgressContainer,
  ProgressButton,
  ProgressTitleSection,
  ProgressTitle,
  ProgresAceptedSection,
  ProgressSection,
  ProgressSectionContainer,
} from "./styles";

export interface ICardChallenge {
  /** Name of card challenge */
  name: string;
  /** Description of card challenge */
  description: string;
  /** URL image */
  image: string;
  /** Button Action text title when completed prop is false */
  buttonText: string;
  /** Progress button text title when completed prop is false */
  progressButtonText: string;
  /** Progress text in right of icon progress */
  progressTextTitle: string;
  /** Complete text in buton content when completed prop is true */
  completeText: string;
  /** Click button action */
  handleClick?: () => void;
  /** Icon name for progress section */
  iconProgress?: string;
  /** Progress of challenge completed */
  progress?: number;
  /** All challenges completed */
  completed?: boolean;
  /** ProgressBar color */
  colorProgress?: keysTheme;
  /** Accepted text on progress section */
  acceptedText?: string;
  /** Accepted description text on progress section */
  acceptedDescriptionText?: string;
}

export const OrganismCardChallenge = ({
  name,
  description,
  image,
  buttonText,
  progressButtonText,
  progressTextTitle,
  completeText,
  handleClick,
  iconProgress = "beer",
  progress = 0,
  completed = false,
  colorProgress = "primary",
  acceptedText = "Accepted",
  acceptedDescriptionText = "",
}: ICardChallenge) => {
  const [isOpen, setIsOpen] = useState<boolean>(false);

  return (
    <CardChallenge
      height={isOpen ? "276px" : "172px"}
      backgroundColor={theme.neutral100}
    >
      <CardChallengeImage>
        <AtomImage src={image} alt="image" imgWidth="100%" imgHeight="100%" />
      </CardChallengeImage>
      <CardChallengeInfo>
        <CardChallengeTitle>
          <AtomHeadline
            size="medium"
            text={name}
            weight="light"
            align="left"
            styles={{ margin: "0" }}
          />
        </CardChallengeTitle>
        <CardChallengeDescription>
          <AtomBody
            text={description}
            size="small"
            weight="regular"
            color={"neutral700"}
            align="left"
          />
        </CardChallengeDescription>
        <CardChallengeButton>
          <CardChallengeButtonContent>
            {progress > 0 && !completed && (
              <ProgressContainer>
                <ProgressButton onPress={() => setIsOpen(!isOpen)}>
                  <AtomBody
                    text={progressButtonText}
                    size="small"
                    weight="semibold"
                    color={"primary"}
                    align="left"
                  />
                  <IconContainerProgress>
                    <AtomIcon
                      name={
                        isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"
                      }
                      size={8}
                      color={"primary"}
                    />
                  </IconContainerProgress>
                </ProgressButton>

                {isOpen ? (
                  <ProgressSection>
                    <ProgressTitleSection>
                      <IconContainer>
                        <AtomIcon
                          name={iconProgress}
                          size={18}
                          color={"neutral500"}
                        />
                      </IconContainer>
                      <ProgressTitle>
                        <AtomBody
                          text={progressTextTitle}
                          size="small"
                          weight="semibold"
                          color={"neutral700"}
                          align="left"
                        />
                      </ProgressTitle>
                    </ProgressTitleSection>

                    <ProgressSectionContainer>
                      <AtomProgressBar
                        percentage={progress}
                        colorPoints={colorProgress}
                        height="5px"
                      />
                    </ProgressSectionContainer>

                    <ProgresAceptedSection>
                      <AtomBody
                        text={acceptedText}
                        size="small"
                        weight="semibold"
                        color={"neutral700"}
                        align="left"
                      />
                      <AtomBody
                        text={acceptedDescriptionText}
                        size="small"
                        weight="light"
                        color={"neutral700"}
                        align="right"
                      />
                    </ProgresAceptedSection>
                  </ProgressSection>
                ) : (
                  <></>
                )}
              </ProgressContainer>
            )}
            {completed ? (
              <CompletedButton>
                <AtomBody
                  text={completeText}
                  size="small"
                  weight="semibold"
                  color={"primary"}
                  align="left"
                />
                <IconContainer>
                  <AtomIcon name="check" size={12} color={"primary"} />
                </IconContainer>
              </CompletedButton>
            ) : (
              <AtomButtonDefault
                disabled={false}
                color={"primary"}
                text={buttonText}
                width="100%"
                onPress={handleClick}
                size="small"
              />
            )}
          </CardChallengeButtonContent>
        </CardChallengeButton>
      </CardChallengeInfo>
    </CardChallenge>
  );
};
