pdf-reader-web/components/AnnotationOptions/index.tsx

import React, { useState } from 'react';

import Button from '../Button';
import Icon from '../Icon';
import Divider from '../Divider';
import Box from '../Box';
import Sliders from '../Sliders';
import ColorSelector from '../../containers/ColorSelector';

import { Container, Subtitle, SliderWrapper } from './styled';

type Props = {
  onUpdate: OnUpdateType;
  onDelete: () => void;
  colorProps?: string;
  opacityProps?: number;
};

const AnnotationOptions: React.FC<Props> = ({
  onUpdate,
  onDelete,
  colorProps,
  opacityProps,
}: Props) => {
  const [openSlider, setSlider] = useState(false);
  const [opacity, setOpacity] = useState(opacityProps);

  const handleClick = (color: string): void => {
    onUpdate({ bdcolor: color });
  };

  const handleChange = (value: number): void => {
    setOpacity(value);
    onUpdate({ transparency: value * 0.01 });
  };

  const sliderToggle = (e: React.MouseEvent<HTMLElement>): void => {
    e.preventDefault();
    setSlider(!openSlider);
  };

  return (
    <Container>
      {openSlider && (
        <>
          <Box w="40px" h="36px" d="flex" j="center">
            <Icon glyph="right-arrow" onClick={sliderToggle} />
          </Box>
          <Divider style={{ margin: '0 10px 0 10px' }} />
          <SliderWrapper>
            <Sliders value={opacity} onChange={handleChange} />
          </SliderWrapper>
          <Subtitle>{`${opacity} %`}</Subtitle>
        </>
      )}
      {!openSlider && (
        <>
          <ColorSelector selectedColor={colorProps} onClick={handleClick} />
          <Subtitle>opacity</Subtitle>
          <Button
            appearance="dark"
            style={{ height: '34px', width: '80px', fontSize: '12px' }}
            onClick={sliderToggle}
          >
            {`${opacity} %`}
          </Button>
          <Divider style={{ height: '44px', margin: '0 6px 0 15px' }} />
          <Box w="48px" h="36px" d="flex" j="center">
            <Icon glyph="trash" onClick={onDelete} />
          </Box>
        </>
      )}
    </Container>
  );
};

export default AnnotationOptions;