/* eslint jsx-a11y/click-events-have-key-events: warn */

/* eslint jsx-a11y/no-static-element-interactions: warn */
import clsx from 'clsx';
import { useEffect, useState } from 'react';

import Button, { ButtonShape, ButtonSize } from '@/components/button/Button';
import StudioLyricsDisplayV2 from '@/components/studio/StudioLyricsDisplayV2';
import { CaretDownIcon, CaretUpIcon } from '@/icons';

type Props = {
  isOpen: boolean;
  onOpenChange: (isOpen: boolean) => void;
  startSeconds: number;
  endSeconds: number;
  onStartSecondsChange: (startSeconds: number) => void;
  onEndSecondsChange: (endSeconds: number) => void;
};

export const EditSelection = ({
  isOpen,
  onOpenChange,
  startSeconds,
  endSeconds,
  onStartSecondsChange,
  onEndSecondsChange,
}: Props) => {
  const [localStartSeconds, setLocalStartSeconds] = useState(startSeconds);
  const [localEndSeconds, setLocalEndSeconds] = useState(endSeconds);

  useEffect(() => {
    setLocalStartSeconds(startSeconds);
    setLocalEndSeconds(endSeconds);
  }, [startSeconds, endSeconds]);

  return (
    <div
      className={clsx(
        'group relative w-full overflow-hidden rounded-[20px] bg-background-secondary backdrop-blur-[100px]'
      )}
    >
      <div
        className={clsx(
          'flex h-[60px] flex-row items-center px-4 transition-[height] duration-500 ease-in-out'
        )}
        onClick={() => onOpenChange(!isOpen)}
      >
        <div className='flex flex-1 flex-row items-center justify-between p-2'>
          <span className='flex items-center font-medium'>Edit Selection</span>
          <div className='flex flex-row items-center'>
            <input
              type='text'
              className='text-md mx-1 w-20 rounded-[50px] border bg-transparent px-2 py-1 text-center'
              value={localStartSeconds.toFixed(2)}
              onChange={(e) => setLocalStartSeconds(Number(e.target.value))}
              onBlur={(e) => onStartSecondsChange(Number(e.target.value))}
              onClick={(e) => e.stopPropagation()}
            />
            <span className='mx-1'>&ndash;</span>
            <input
              type='text'
              className='text-md mx-1 w-20 rounded-[50px] border bg-transparent px-2 py-1 text-center'
              value={localEndSeconds.toFixed(2)}
              onChange={(e) => setLocalEndSeconds(Number(e.target.value))}
              onBlur={(e) => onEndSecondsChange(Number(e.target.value))}
              onClick={(e) => e.stopPropagation()}
            />
          </div>
          <div className='flex flex-row-reverse'>
            <Button
              size={ButtonSize.Mini}
              icon={!isOpen ? CaretDownIcon : CaretUpIcon}
              className='transition-transform duration-500 ease-in-out'
              shape={ButtonShape.Pill}
              onClick={() => {
                onOpenChange(!isOpen);
              }}
            />
          </div>
        </div>
      </div>
      {isOpen && (
        <div
          className={clsx(
            'mb-[12px] flex h-[150px] flex-col overflow-y-auto rounded-b-2xl px-4'
          )}
        >
          <StudioLyricsDisplayV2 />
        </div>
      )}
    </div>
  );
};