import { GGanttChartPropsRefs } from "../models/models"
import useDayjsHelper from "./useDayjsHelper"
import { computed } from "vue"

export default function useTimeaxisUnits(
  gGanttChartPropsRefs: GGanttChartPropsRefs
) {
  const { precision, minuteInterval } = gGanttChartPropsRefs
  const { chartStartDayjs, chartEndDayjs } = useDayjsHelper(gGanttChartPropsRefs)


  const upperPrecision = computed(() => {
    switch (precision?.value) {
      case "hour":
        return "day"
      case "day":
        return "month"
      case "month":
        return "year"
      case "minute":
        return "day"
      default:
        throw new Error("Precision prop incorrect. Must be one of the following: 'hour', 'day', 'month'")
    }
  })

  const displayFormats = {
    hour: "HH",
    date: "MMMDD日",
    day: "DD.MMM ",
    month: "MMMM YYYY",
    year: "YYYY",
    minute: "HH:mm"
  }

  // const minuteFormat = {
  //    five: 5,
  //    fifteen: 15,
  //    half: 30
  // }
  const timeaxisUnits = computed(() => {
    const upperUnits: { label: string, value?: string, width?: string }[] = []
    const lowerUnits: { label: string, value?: string, width?: string }[] = []
    const upperUnit = upperPrecision.value === "day" ? "date" : upperPrecision.value
    const lowerUnit = precision.value
    let currentUnit = chartStartDayjs.value.startOf(lowerUnit)
    const totalMinutes = chartEndDayjs.value.diff(chartStartDayjs.value, "minutes", true)
    let upperUnitMinutesCount = 0
    let currentUpperUnitVal = currentUnit[upperUnit]()
    while (currentUnit.isBefore(chartEndDayjs.value) || currentUnit.isSame(chartEndDayjs.value)) {
      // if (currentUnit[upperUnit]() !== currentUpperUnitVal) { // when upper unit changes:
      //   let width = "0%"
      //   if (upperUnits.length === 0) {
      //     width = `${currentUnit.startOf(upperUnit).diff(chartStartDayjs.value, "minutes", true) / totalMinutes * 100}%`
      //   } else if (currentUnit.isSameOrAfter(chartEndDayjs.value)) {
      //     width = `${chartEndDayjs.value.diff(currentUnit.startOf(upperUnit), "minutes", true) / totalMinutes * 100}%`
      //   } else {
      //     const end = currentUnit.startOf(upperUnit)
      //     const start = currentUnit.subtract(1, upperUnit).startOf(upperUnit)
      //     width = `${end.diff(start, "minutes", true) / totalMinutes * 100}%`
      //   }
      //   upperUnits.push({
      //     label: currentUnit.subtract(1, upperUnit).format(displayFormats[upperUnit]),
      //     value: String(currentUpperUnitVal),
      //     width
      //   })
      //   upperUnitMinutesCount = 0
      //   currentUpperUnitVal = currentUnit[upperUnit]()
      // }
      let width = "0%"
      //create and push lower unit:
      const addCount = precision.value == 'minute' ? minuteInterval?.value: 1;
      const addCountUnit = currentUnit.add(addCount, lowerUnit);
      if(precision.value == 'minute') {

        width = 100/( (totalMinutes/addCount)) + "%"
        if(currentUnit.isSame(chartEndDayjs.value)){
           width = "0%"
        }
      }else{
        if (lowerUnits.length === 0) {
          width = `${currentUnit.endOf(lowerUnit).diff(chartStartDayjs.value, "minutes", true) / totalMinutes * 100}%`
        } else if (addCountUnit.isSameOrAfter(chartEndDayjs.value)) {
          width = `${chartEndDayjs.value.diff(currentUnit.startOf(lowerUnit), "minutes", true) / totalMinutes * 100}%`
        } else {
          width = `${currentUnit.endOf(lowerUnit).diff(currentUnit.startOf(lowerUnit), "minutes", true) / totalMinutes * 100}%`
        }
      }

      lowerUnits.push({
        label: currentUnit.format(displayFormats[lowerUnit]),
        value: String(currentUnit[lowerUnit]()),
        width
      })
      const prevUpperUnitUnit = currentUnit
      currentUnit = addCountUnit
      if (currentUnit.isBefore(chartEndDayjs.value) || currentUnit.isSame(chartEndDayjs.value)) {
        upperUnitMinutesCount += currentUnit.diff(prevUpperUnitUnit, "minutes", true)
      }
    }
    // for the very last upper unit :
    if (!upperUnits.some(un => un.value === String(currentUpperUnitVal))) {
      upperUnitMinutesCount += chartEndDayjs.value.diff(currentUnit.subtract(1, lowerUnit === 'minute' ? 'hour': lowerUnit ), "minutes", true)
      upperUnits.push({
        label: currentUnit.format(displayFormats[upperUnit]),
        value: String(currentUpperUnitVal),
        width: `${(upperUnitMinutesCount / totalMinutes) * 100}%`
      })
    }
    return { upperUnits, lowerUnits }
  })

  return {
    timeaxisUnits
  }
}
