// @flow
import React, { useContext, type StatelessFunctionalComponent } from 'react';
import { ThemeContext } from 'styled-components';
import type { RefreshIconProps } from './refresh-proptypes';
import { getFillColor } from './refresh.css-rules';

export const RefreshIcon: StatelessFunctionalComponent<RefreshIconProps> = ({
  disabled = false,
}: RefreshIconProps) => {
  const theme = useContext(ThemeContext);
  return (
    <svg
      width={24}
      height={24}
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M17.7 16c-1.3 1.8-3.4 3-5.7 3-2.7 0-5.1-1.6-6.2-3.9v2.1c0 .6-.4 1-1 1s-1-.4-1-1V13c0-.6.4-1 1-1H9c.6 0 1 .4 1 1s-.4 1-1 1H7.5c.8 1.8 2.5 3 4.5 3 1.7 0 3.1-.8 4-2.1.2-.3.5-.4.8-.4h.1c.8 0 1.3.9.8 1.5zm1.5-10c-.6 0-1 .4-1 1v1.9C17 6.6 14.7 5 12 5 9.6 5 7.5 6.2 6.3 8c-.4.6 0 1.5.8 1.5h.1c.3 0 .6-.2.8-.4.9-1.2 2.4-2.1 4-2.1 2.1 0 3.9 1.4 4.6 3.2H15c-.6 0-1 .4-1 1s.4 1 1 1h4.2c.6 0 1-.4 1-1V7c0-.6-.4-1-1-1z"
        fill={getFillColor(theme)}
        fillOpacity={disabled ? '0.4' : '1'}
      />
    </svg>
  );
};

RefreshIcon.displayName = 'RefreshIcon';
