// @flow
import React from 'react';
import type { ComponentType } from 'react';
import styled, { withTheme } from 'styled-components';
import type { ThemeProps } from '../../../../types';
import { getPaletteColor, type BrandProps } from '../../../../mixins/branding';

type SearchProps = {| ...BrandProps, ...ThemeProps, className?: string |};

const _SearchIcon = ({
  className,
  theme,
  colorName = 'greyscale-black',
}: SearchProps) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 16 16"
    className={className}
  >
    <g
      fill="none"
      fillRule="evenodd"
      stroke={getPaletteColor(colorName)({ theme })}
      transform="translate(1 1)"
    >
      <circle cx="6" cy="6" r="5" strokeWidth="2" />
      <path strokeLinecap="round" strokeWidth="2.5" d="M10 10l4 4" />
    </g>
  </svg>
);

export const SearchIcon: ComponentType<{||}> = withTheme(_SearchIcon);

SearchIcon.displayName = 'SearchIcon';

export const StyledSearchIcon = styled(SearchIcon)`
  pointer-events: none;
  position: absolute;
  top: ${({ large }) => (large ? '21px' : '12px')};
`;
export const LeftStyledSearchIcon = styled(StyledSearchIcon).attrs(() => ({
  colorName: 'greyscale-medium',
}))`
  left: ${({ large }) => (large ? '21px' : '12px')};
`;
LeftStyledSearchIcon.displayName = 'LeftStyledSearchIcon';

export const RightStyledSearchIcon = styled(StyledSearchIcon).attrs(() => ({
  colorName: 'greyscale-black',
}))`
  right: 26px;
`;

RightStyledSearchIcon.displayName = 'RightStyledSearchIcon';
