import React, { useGlobal } from "reactn";
import { View, Text, Pressable } from "react-native";
import { capitalize } from "lodash";
import moment from "moment";
import { Motion } from "@legendapp/motion";
import { validateDate } from "react-native-minuit/src/actions/dateActions";

import { Fonts, Palette, Style } from "../styles";
import { projectsRef } from "../config/firebase";

export default ({ actionList = [] }) => {
  const [currentProjectID] = useGlobal("currentProjectID");

  const onCheck = async ({ todoID, isChecked = false }) => {
    try {
      const updatedObject = {
        isChecked: !isChecked,
        completionTimestamp: !isChecked ? new Date() : null,
      };

      await projectsRef
        .doc(currentProjectID)
        .collection("todoList")
        .doc(todoID)
        .update(updatedObject);
    } catch (error) {
      console.log("error", error);
    }
  };

  if (!actionList.length) {
    return (
      <Text style={Fonts({ type: "default", style: {} })}>
        Vous n'avez pas d'actions en attente.
      </Text>
    );
  }

  return actionList.map(
    (
      {
        title = "",
        requestedCompletionTimestamp = null,
        isChecked = false,
        todoID = null,
      },
      index
    ) => {
      return (
        <React.Fragment key={index}>
          <Pressable
            style={Style.containerRow}
            onPress={() => onCheck({ todoID, isChecked })}
          >
            <View style={[Style.containerRadio, { marginRight: 20 }]}>
              {isChecked && (
                <Motion.View
                  initial={{ opacity: 0, scale: 0 }}
                  animate={{ opacity: 1, scale: 1 }}
                  style={Style.circleRadio}
                />
              )}
            </View>

            <View>
              <Text
                style={Fonts({
                  type: "default",
                  style: isChecked
                    ? { textDecorationLine: "line-through" }
                    : {},
                })}
              >
                {capitalize(title)}
              </Text>

              <Text
                style={Fonts({
                  type: "default",
                  color: Palette.transparentWhite,
                })}
              >
                {capitalize(
                  moment(validateDate(requestedCompletionTimestamp)).fromNow()
                )}
              </Text>
            </View>
          </Pressable>

          {index !== actionList.length - 1 && (
            <View
              style={[
                Style.separatorHorizontal,
                Style.containerRevertGutter,
                { width: "112%" },
              ]}
            />
          )}
        </React.Fragment>
      );
    }
  );
};