import { createContext, FC, ReactNode, useContext, useState } from "react";

export interface IToDo {
  id: number;
  title: string;
  done: boolean;
  date: Date | null;
  points?: number;
  rotate: boolean;
  repeatType: string;
}

export const repeatOptions = [
  { label: "None", value: "None" },
  { label: "Every week", value: "Every week" },
  { label: "Once a month", value: "Once a month" },
  { label: "Once a year", value: "Once a year" },
];

interface IToDosContext {
  toDos: IToDo[];
  updateToDo: (id: number, changes: Partial<IToDo>) => void;
  addToDo: (newToDo: IToDo) => void;
  maxPoints: number;
}

const ToDosContext = createContext<IToDosContext>(undefined!);

export const ToDosContextProvider: FC<{ children: ReactNode }> = ({
  children,
}) => {
  const [toDos, setToDos] = useState<IToDo[]>([
    {
      id: 0,
      title: "Pay: Credit card",
      done: false,
      date: new Date(),
      rotate: true,
      repeatType: "Every week",
    },
    {
      id: 1,
      title: "Monthly Log story",
      done: false,
      date: new Date(),
      rotate: false,
      repeatType: "Every week",
    },
    {
      id: 2,
      title: "Write: Arcade Highlights",
      done: false,
      date: new Date(),
      rotate: true,
      repeatType: "Every week",
    },
    {
      id: 3,
      title: "Dressup: Cat",
      done: false,
      date: new Date(Date.now() + 86400000),
      points: 40,
      rotate: false,
      repeatType: "Every week",
    },
    {
      id: 4,
      title: "Trim: Nails",
      done: false,
      date: new Date(Date.now() + 86400000),
      rotate: false,
      repeatType: "Once a Month",
    },
    {
      id: 5,
      title: "Monthly Log",
      done: false,
      date: new Date(Date.now() + 2 * 86400000),
      rotate: true,
      repeatType: "Once a Month",
    },
    {
      id: 6,
      title: "Do it",
      done: false,
      date: new Date(Date.now() + 3 * 86400000),
      rotate: false,
      repeatType: "Once a year",
      points: 50,
    },
    {
      id: 7,
      title: "Buy Nautica Voyage",
      done: false,
      date: null,
      rotate: false,
      repeatType: "None",
    },
    {
      id: 8,
      title: "Sell Dan's Xbox",
      done: false,
      date: null,
      rotate: false,
      repeatType: "None",
      points: 10,
    },
  ]);

  const initCalc = (): number => {
    return toDos.reduce(
      (sum, todo) => sum + (todo.points ? todo.points : 0),
      50
    );
  };

  const calculateMaxPoints = () => {
    const totalPoints = toDos.reduce(
      (sum, todo) => sum + (todo.points ? todo.points : 0),
      0
    );
    setMaxPoints(totalPoints);
  };

  const [maxPoints, setMaxPoints] = useState<number>(initCalc);

  const updateToDo = (id: number, changes: Partial<IToDo>) => {
    setToDos((prevToDos) =>
      prevToDos.map((toDo) => (toDo.id === id ? { ...toDo, ...changes } : toDo))
    );

    calculateMaxPoints();
  };

  const addToDo = (newToDo: IToDo) => {
    setToDos((prevToDos) => [
      ...prevToDos,
      {
        ...newToDo,
        id: prevToDos.length ? prevToDos[prevToDos.length - 1].id + 1 : 0,
      },
    ]);
    calculateMaxPoints();
  };

  return (
    <ToDosContext.Provider value={{ toDos, updateToDo, addToDo, maxPoints }}>
      {children}
    </ToDosContext.Provider>
  );
};

export const useToDosContext = () => useContext(ToDosContext)!;