import { Gantt, Willow } from "@svar-ui/react-gantt";
import "@svar-ui/react-gantt/all.css";
import { useMemo } from "react";
import {Avatar, Flex, Text} from "@chakra-ui/react";

export default function TravelGanttChart() {

  const upcoming_travel = useMemo(() => [
    {
      id: 20,
      text: "Guatemala",
      start: new Date(2026, 9, 21),
      end: new Date(2026, 9, 29),
      duration: 8,
      participants: ["Chris Hight", "Angie Diefenbach"],
      type: "travel",
    },
    {
      id: 47,
      text: "Venuatu",
      start: new Date(2026, 10, 12),
      end: new Date(2026, 10, 15),
      duration: 3,
      participants: ["Chris Hight"],
      type: "travel",
    },
    {
      id: 22,
      text: "Costa Rica",
      start: new Date(2027, 1, 1),
      end: new Date(2027, 1, 10),
      duration: 9,
      participants: ["Chris Hight"],
      type: "travel",
    },
  ], []);

  const columns = [
    { id: "start", header: "Start Date", width: 100, height: 200, align: "left" },
    { id: "duration", header: "Duration", width: 100, height: 200, align: "left" },
    { id: "participants", header: "Participants", width: 150, height: 200, align: "center", cell: AvatarCell, flexgrow: 1 },
  ]

  return (
    <div style={{ height: "100%", width: "100%" }}>
      <Willow>
        <Gantt tasks={upcoming_travel} cellWidth={20} columns={columns} />
      </Willow>
    </div>
  )
}

// assume each user has access to the full list of VDAP users

const users = [
  {
    fullname: "Chris Hight",
    firstname: "Chris",
    lastname: "Hight",
    avatar: undefined
  },
  {
    fullname: "Angie Diefenbach",
    firstname: "Chris",
    lastname: "Hight",
    avatar: undefined
  },
  {
    fullname: "Venessa Kuchenik",
    firstname: "Venessa",
    lastname: "Kuchenik",
    avatar: undefined
  },
]

function AvatarCell({ row }) {
  const travelers = row.participants.map((r) => {
    return users.find((u) => u.fullname === r);
  });

  return (
    <Flex direction="column" alignItems="left" justifyContent="space-between">
      {travelers.map((traveler) => (
        <Avatar.Root shape="full">
          <Avatar.Image src={traveler.avatar} />
          <Avatar.Fallback name={traveler.fullname} />
          <Text>{traveler.fullname}</Text>
        </Avatar.Root>
      ))}
    </Flex>
  )
}