'use client'

import React, { useEffect, useState } from 'react'
import { DayPilot, DayPilotScheduler } from 'daypilot-pro-react'

export default function Ttest() {
  const [scheduler, setScheduler] = useState<DayPilot.Scheduler>()

  const initialConfig: DayPilot.SchedulerConfig = {
    startDate: '2024-01-01',
    days: 366,
    scale: 'Day',
    timeHeaders: [{ groupBy: 'Month' }, { groupBy: 'Day', format: 'd' }],
    rowHeaderColumns: [
      { text: 'Storage Box', width: 100 },
      { text: 'Capacity', display: 'capacity' },
      { text: 'Status', width: 50 },
    ],
    allowMultiRange: true,
  }

  const [config, setConfig] = useState(initialConfig)

  useEffect(() => {
    if (!scheduler || scheduler?.disposed()) {
      return
    }

    const resources = [
      { name: 'Box A', id: 'A', capacity: 50, status: 'locked' },
      { name: 'Box B', id: 'B', capacity: 100 },
      { name: 'Box C', id: 'C', capacity: 100 },
      { name: 'Box D', id: 'D', capacity: 150, status: 'locked' },
      { name: 'Box E', id: 'E', capacity: 150, status: 'locked' },
      { name: 'Box F', id: 'F', capacity: 50, status: 'locked' },
      { name: 'Box G', id: 'G', capacity: 50 },
    ]
    const events = [
      {
        id: 1,
        text: 'Delivery 1',
        start: '2024-01-03T00:00:00',
        end: '2024-01-13T00:00:00',
        resource: 'B',
        barColor: '#5bbe2d',
      },
      {
        id: 2,
        text: 'Delivery 2',
        start: '2024-01-05T00:00:00',
        end: '2024-01-10T00:00:00',
        resource: 'D',
        barColor: '#f1c232',
      },
    ]
    scheduler.update({ resources, events })
  }, [scheduler])

  const onTimeRangeSelected = async (args: DayPilot.SchedulerTimeRangeSelectedArgs) => {
    const modal = await DayPilot.Modal.prompt('Create a new event:', 'Event 1')
    scheduler?.clearSelection()
    if (modal.canceled) {
      return
    }
    scheduler?.events.add({
      start: args.start,
      end: args.end,
      id: DayPilot.guid(),
      text: modal.result,
      resource: args.resource,
    })
  }

  const onBeforeEventRender = (args: DayPilot.SchedulerBeforeEventRenderArgs) => {
    args.data.areas = [
      {
        right: 10,
        top: 'calc(50% - 7px)',
        width: 18,
        height: 18,
        symbol: '/daypilot.svg#checkmark-2',
        backColor: '#999999',
        fontColor: '#ffffff',
        padding: 2,
        style: 'border-radius: 50%',
      },
    ]
  }

  const onBeforeRowHeaderRender = (args: DayPilot.SchedulerBeforeRowHeaderRenderArgs) => {
    args.row.columns[1].horizontalAlignment = 'center'
    if (args.row.data.status === 'locked') {
      args.row.columns[2].areas = [
        {
          left: 'calc(50% - 8px)',
          top: 10,
          width: 20,
          height: 20,
          symbol: '/daypilot.svg#padlock',
          fontColor: '#777777',
        },
      ]
    }
  }

  return (
    <div>
      <DayPilotScheduler
        {...config}
        onBeforeEventRender={onBeforeEventRender}
        onBeforeRowHeaderRender={onBeforeRowHeaderRender}
        controlRef={setScheduler}
        onTimeRangeSelected={(a) => console.log(a)}
        onTimeRangeClick={(a) => console.log(a)}
        onTimeRangeClicked={(a) => console.log(a)}
        onTimeRangeDoubleClick={(a) => console.log(a)}
        onTimeRangeDoubleClicked={(a) => console.log(a)}
        onTimeRangeRightClick={(a) => console.log(a)}
        onTimeRangeRightClicked={(a) => console.log(a)}
      />
    </div>
  )
}