export function PlayerControls(props: { playerRef: RefObject<PlayerRef> }) {
  const parentRef = useRef<HTMLDivElement | null>(null);
  const form = useFormContext<typeof CompositionProps>();
  const segments = form.watch('segments');
  const fps = form.getValues('fps');

  const rowVirtualizer = useVirtualizer({
    count: segments.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => ITEM_SIZE,
    gap: 8
  });

  function handleVideoNavigation(start: number) {
    props.playerRef.current?.seekTo(start * fps);
    props.playerRef.current?.pause();
  }

  function updateSegment(index: number, newSegment: z.input<typeof SegmentSchema>) {
    form.setValue('segments', form.getValues('segments').map((segment, i) => i === index ? newSegment : segment));
  }

  function insertSegment(index: number, newSegment: z.input<typeof SegmentSchema>) {
    form.setValue('segments', [...form.getValues('segments').slice(0, index), newSegment, ...form.getValues('segments').slice(index)]);
  }

  function removeSegment(index: number) {
    form.setValue('segments', form.getValues('segments').filter((_, i) => index !== i));
  }

  return (
    <Tabs className="grid gap-4 auto-rows-min" defaultValue="styling">
      <Tabs.List className="grid grid-cols-2 gap-4 border border-blue-500 p-4 rounded-3xl">
        <Tabs.Trigger value="styling" className="text-white border border-blue-300 rounded-3xl px-4 py-2">
          Styling
        </Tabs.Trigger>
        <Tabs.Trigger value="captions" className="text-white border border-blue-300 rounded-3xl px-4 py-2">
          Captions
        </Tabs.Trigger>
      </Tabs.List>
      <Tabs.Content value="styling" className="text-white">
        Styling
      </Tabs.Content>
      <Tabs.Content ref={parentRef} value="captions" className="h-[400px] overflow-y-auto">
        <div className="relative" style={{ height: rowVirtualizer.getTotalSize() }}>
          {rowVirtualizer.getVirtualItems().map(virtualItem => (
            <div 
              key={virtualItem.key} 
              data-index={virtualItem.index}
              className="w-full absolute top-0 left-0 grid gap-y-2 border border-blue-300 hover:border-blue-500 rounded-xl py-4 px-4" 
              style={{ height: virtualItem.size, transform: `translateY(${virtualItem.start}px)` }}
              tabIndex={0}
              onClick={() => handleVideoNavigation(segments[virtualItem.index].start)}
            >
              <div className="flex justify-between items-center">
                <div>
                  <Popover>
                    <Popover.Trigger className="text-white text-sm border border-blue-300 hover:border-blue-500 px-2 rounded-2xl">
                      {segments[virtualItem.index].start.toFixed(2)} - {segments[virtualItem.index].end.toFixed(2)}
                    </Popover.Trigger>
                    <Popover.Content className="w-52 grid grid-cols-1 gap-2">
                      <Form.Field control={form.control} name={`segments.${virtualItem.index}.start`} label="Start time" render={(field) => (
                        <Input 
                          {...field} 
                          type="number" 
                          step={0.01} 
                          placeholder="Start time" 
                          className="text-black placeholder:text-black" 
                          value={field.value.toFixed(2)}
                          onChange={(e) => field.onChange(e.target.valueAsNumber)}
                        />
                      )} />
                      <Form.Field control={form.control} name={`segments.${virtualItem.index}.end`} label="End time" render={(field) => (
                        <Input 
                          {...field} 
                          type="number" 
                          step={0.01} 
                          placeholder="End time" 
                          className="text-black placeholder:text-black" 
                          value={field.value.toFixed(2)}
                          onChange={(e) => field.onChange(e.target.valueAsNumber)}
                        />
                      )} />
                    </Popover.Content>
                  </Popover>
                </div>
                <div className="flex items-center gap-2">
                  <Tooltip>
                    <Tooltip.Trigger 
                      className="text-white hover:text-blue-500" 
                      onClick={() => insertSegment(virtualItem.index, { start: segments[virtualItem.index].start, end: segments[virtualItem.index].start, value: [{ text: "" }] })}
                    >
                      <BsArrowUpCircle className="w-5 h-5" />
                    </Tooltip.Trigger>
                    <Tooltip.Content>
                      Add Caption Before
                    </Tooltip.Content>
                  </Tooltip>
                  <Tooltip>
                    <Tooltip.Trigger 
                      className="text-white hover:text-blue-500" 
                      onClick={() => insertSegment(virtualItem.index + 1, { start: segments[virtualItem.index].end, end: segments[virtualItem.index].end, value: [{ text: "" }] })}
                    >
                      <BsArrowDownCircle className="w-5 h-5" />
                    </Tooltip.Trigger>
                    <Tooltip.Content>
                      Add Caption After
                    </Tooltip.Content>
                  </Tooltip>
                  <Tooltip>
                    <Tooltip.Trigger 
                      className="text-white hover:text-blue-500" 
                      onClick={() => updateSegment(virtualItem.index, { ...segments[virtualItem.index], hidden: !segments[virtualItem.index].hidden })}
                    >
                      {segments[virtualItem.index].hidden ? <BsEyeSlash className="w-5 h-5" /> : <BsEye className="w-5 h-5" />}
                    </Tooltip.Trigger>
                    <Tooltip.Content>
                      {segments[virtualItem.index].hidden ? "Show Caption" : "Hide Caption"}
                    </Tooltip.Content>
                  </Tooltip>
                  <Tooltip>
                    <Tooltip.Trigger 
                      className="text-white hover:text-blue-500 disabled:text-gray-500 disabled:cursor-not-allowed" 
                      onClick={() => removeSegment(virtualItem.index)}
                      disabled={segments.length === 1}
                    >
                      <BsTrash3 className="w-5 h-5" />
                    </Tooltip.Trigger>
                    {segments.length !== 1 && <Tooltip.Content>Delete</Tooltip.Content>}
                  </Tooltip>
                </div>
              </div>
              <TextControls segmentIndex={virtualItem.index} />
            </div>
          ))}
        </div>
      </Tabs.Content>
    </Tabs>
  );
}