import React from 'react';
import styled from 'styled-components';
import LeftArrowClickIcon from './img/arrow01-left-clicked.png';
import LeftArrowIcon from './img/arrow01-left.png';
import RightArrowClickIcon from './img/arrow01-right-clicked.png';
import RightArrowIcon from './img/arrow01-right.png';

export interface ArrowBarProps extends React.HTMLAttributes<HTMLDivElement> {
  direction: 'right' | 'left';
  onPointerDown: () => void;
  size?: number;
  scale?: number;
}

export const SelectArrow: React.FC<ArrowBarProps> = ({
  direction = 'left',
  size,
  scale = 1,
  onPointerDown,
  ...props
}) => {
  return (
    <>
      {direction === 'left' ? (
        <LeftArrow
          size={size}
          scale={scale}
          onPointerDown={() => onPointerDown()}
          {...props}
        ></LeftArrow>
      ) : (
        <RightArrow
          size={size}
          scale={scale}
          onPointerDown={() => onPointerDown()}
          {...props}
        ></RightArrow>
      )}
    </>
  );
};

interface IArrowProps {
  size?: number;
  scale?: number;
}

const LeftArrow = styled.span<IArrowProps>`
  background-image: url(${LeftArrowIcon});
  background-size: 100% 100%;
  left: 0;
  position: absolute;
  width: ${props => props.size || 40}px;
  height: ${props => props.size || 42}px;
  transform: scale(${props => props.scale || 1});
  :active {
    background-image: url(${LeftArrowClickIcon});
  }
  z-index: 2;
`;

const RightArrow = styled.span<IArrowProps>`
  background-image: url(${RightArrowIcon});
  right: 0;
  position: absolute;
  width: ${props => props.size || 40}px;
  height: ${props => props.size || 42}px;
  background-size: 100% 100%;
  transform: scale(${props => props.scale || 1});
  :active {
    background-image: url(${RightArrowClickIcon});
  }
  z-index: 2;
`;

export default SelectArrow;
