import { useMemo } from 'react';
import styles from '../../../styles/rt-splitter.module.css';
import { RtSplitterBarProps } from '../rt-splitter-bar.types';
import { RtFrame } from '@dpa/react-frame-intro';

interface RtSplitterBarDraggerProps
  extends Pick<RtSplitterBarProps, 'dragLinePaddings' | 'vertical'> {
  isSplitBarHovered: boolean;
}

export const RtSplitterBarDragger = ({
  isSplitBarHovered,
  dragLinePaddings,
  vertical,
}: RtSplitterBarDraggerProps) => {
  const paddings = useMemo(() => {
    const [start, end] = dragLinePaddings;
    if (vertical) {
      return {
        paddingLeft: start,
        paddingRight: end,
      };
    }

    return {
      paddingTop: start,
      paddingBottom: end,
    };
  }, [vertical, dragLinePaddings]);

  const style = useMemo(
    () =>
      isSplitBarHovered
        ? paddings
        : { backgroundColor: 'transparent', ...paddings },
    [paddings, isSplitBarHovered]
  );

  return (
    <RtFrame
      as="div"
      className={styles['rt-splitter-bar-dragger']}
      surface="foundation-tint"
      surfaceState="native"
      use="ashy"
      style={style}
    />
  );
};