// @flow
import React from 'react';
import styled, { useTheme } from 'styled-components';
import { UnstyledButton } from '../../../behaviors';
import type { TranslatedContent } from '../../../../types';
import { getPaletteColor } from '../../../../mixins/branding';

const SearchCloseIcon = () => {
  const theme = useTheme();
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="16"
      height="16"
      viewBox="0 0 16 16"
    >
      <g
        fill="none"
        fillRule="evenodd"
        stroke={getPaletteColor('greyscale-black')({ theme })}
        strokeLinecap="round"
        strokeWidth="2"
      >
        <path d="M3 13L13 3M3 3l10 10" />
      </g>
    </svg>
  );
};

SearchCloseIcon.displayName = 'SearchCloseIcon';

export const StyledCloseButtonContainer = styled(UnstyledButton)`
  && {
    height: 100%;
    position: absolute;
    right: 0px;
    text-align: center;
    top: 0;
    width: ${({ large }) => (large ? '55px' : '40px')};

    &:focus {
      box-shadow: none;
    }
  }
`;

export const ClearInputButton = ({
  show,
  onClick,
  large,
  label,
}: {|
  show: boolean,
  onClick: (string) => void,
  large: boolean,
  label: TranslatedContent,
|}) =>
  show && (
    <StyledCloseButtonContainer
      large={large}
      onClick={onClick}
      aria-label={label}
    >
      <div style={{ position: 'relative', right: large ? '5px' : '13px' }}>
        <SearchCloseIcon />
      </div>
    </StyledCloseButtonContainer>
  );

ClearInputButton.displayName = 'ClearInputButton';
