import * as React from "react";
import { View, TouchableOpacity, ScrollView } from "react-native";
import {
  EditProfileContainer,
  ImageList,
  ProfileImgContainer,
  ProfileImg,
  ProfileImageSelector,
  LabelName,
  ActionsContainer,
  ImageSelected,
  ImageSelectedContainer,
  ShowSection,
  ShowZoom,
} from "./styled";
import Button from "../ui/button";
import Typography from "../ui/typography";
import { circleIn, easeInExpo } from "../animations/easings";

export type ImageProfile = {
  imageUrl: string;
};

export type EditProfileProps = {
  images: ImageProfile[];
  onImageSelect: (imageProfile: ImageProfile) => void;
  imageSelected: ImageProfile | undefined;
  currentImage: ImageProfile;
  name: string;
  onCancel: () => void;
  onSubmit: () => void;
  onChangeImage: () => void;
};

function EditProfile({
  imageSelected,
  images,
  name,
  onCancel,
  onImageSelect,
  onChangeImage,
  onSubmit,
  currentImage,
}: EditProfileProps) {
  return (
    <ShowSection duration={0.2} easing={circleIn}>
      <EditProfileContainer>
        <Typography
          style={{ width: "100%", paddingBottom: 10 }}
          align="left"
          variant="body1"
        >
          {imageSelected ? "Profile picture" : "Select a profile picture"}
        </Typography>
        {imageSelected ? (
          <ImageSelectedContainer>
            <ShowZoom duration={0.3} easing={easeInExpo}>
              <ImageSelected source={{ uri: imageSelected.imageUrl }} />
            </ShowZoom>
            <Button
              style={{ marginTop: 10 }}
              variant="filled"
              onPress={onChangeImage}
              label={"Change"}
            />
          </ImageSelectedContainer>
        ) : (
          <ScrollView style={{ maxHeight: "50%", minHeight: "50%" }}>
            <ImageList>
              {images.map((image, index) => (
                <ProfileImgContainer key={index}>
                  <TouchableOpacity
                    activeOpacity={0.8}
                    onPress={() => {
                      onImageSelect(image);
                    }}
                  >
                    <ProfileImg source={{ uri: image.imageUrl }} />
                  </TouchableOpacity>
                  {currentImage.imageUrl === image.imageUrl ? (
                    <ProfileImageSelector />
                  ) : null}
                </ProfileImgContainer>
              ))}
            </ImageList>
          </ScrollView>
        )}

        <View
          style={{
            width: "100%",
            display: "flex",
            flexDirection: "column",
            alignItems: "flex-start",
            paddingVertical: 10,
          }}
        >
          <Typography style={{ paddingVertical: 10 }} variant="body1">
            Name
          </Typography>
          <LabelName color="white" variant="body1">
            {name}
          </LabelName>
        </View>
        <ActionsContainer>
          <Button variant="filled" onPress={onCancel} label={"Cancel"} />

          <Button variant="filled" onPress={onSubmit} label={"Submit"} />
        </ActionsContainer>
      </EditProfileContainer>
    </ShowSection>
  );
}

export default EditProfile;