// @flow
import React from 'react';
import type { ComponentType } from 'react';
import { withTheme } from 'styled-components';
import type { ToggleArrowsProps } from './toggle-arrows.proptypes';
import { getFillColor } from './toggle-arrows.css-rules';
import type { ThemeProps } from '../../../types';

const _ToggleArrows = ({
  theme,
  disabled,
  useCurrentColor,
  hideTop = false,
  hideBottom = false,
}: ThemeProps & ToggleArrowsProps) => (
  <svg width="8px" viewBox="0 0 32 40">
    <polygon
      points="0,17 32,17 16,0"
      fill={getFillColor({ theme, disabled, useCurrentColor })}
      strokeWidth="0"
      style={{ visibility: hideTop ? 'hidden' : 'visible' }}
    />
    <polygon
      points="0,17 32,17 16,0"
      fill={getFillColor({ theme, disabled, useCurrentColor })}
      strokeWidth="0"
      transform="rotate(180), translate(-32, -40)"
      style={{ visibility: hideBottom ? 'hidden' : 'visible' }}
    />
  </svg>
);

export const ToggleArrows: ComponentType<ToggleArrowsProps> = withTheme(
  _ToggleArrows,
);

ToggleArrows.displayName = 'ToggleArrows';
