import React from 'react';
import Svg, {Path, Circle, Defs, LinearGradient, Stop} from 'react-native-svg';
import {StyleGuide} from '../lib/utils/styleGuide';

interface Props {
  size: number;
  disabled?: boolean;
  fill?: string;
  opacity?: number;
}

const BrandLogo: React.FC<Props> = ({size: width}: {size: number}) => {
  const RATIO = 75 / 32;
  const height = width / RATIO;
  return (
    <Svg width={width} height={height} viewBox="0 0 75 32" fill="none">
      <Path
        d="M69.859 9.637 65.12 27.729l-.012.04h3.69l4.757-18.132h-3.697ZM11.22 19.934a3.994 3.994 0 0 1-1.78.41c-1.328 0-2.083-.212-2.165-1.286v-.072c0-.043-.004-.08-.004-.13v-3.13l.004-.368v-2.205h-.004v-.938l.004-.372V9.714l-3.296.435c2.23-.432 3.509-2.196 3.509-3.954V5.112H3.783v5.065l-.209.059v9.38c.123 2.636 1.86 4.203 4.709 4.203 1.007 0 2.116-.23 2.965-.615l.02-.008v-3.29l-.048.028Z"
        fill={StyleGuide.colors.iconBlack}
      />
      <Path
        d="M11.805 8.955 1.409 10.557v2.636l10.396-1.602V8.955ZM11.805 12.811 1.409 14.414v2.518l10.396-1.603V12.81ZM23.471 14.024c-.147-2.929-1.977-4.664-4.958-4.664-1.714 0-3.127.662-4.086 1.915-.96 1.254-1.461 3.086-1.461 5.314 0 2.227.505 4.065 1.46 5.314.957 1.248 2.373 1.915 4.087 1.915 2.981 0 4.811-1.744 4.958-4.688v4.412h3.699V9.67l-3.699.57v3.785Zm.193 2.568c0 2.594-1.362 4.27-3.47 4.27-2.17 0-3.469-1.597-3.469-4.27-.002-2.689 1.295-4.297 3.467-4.297 1.057 0 1.94.412 2.553 1.19.6.76.917 1.834.917 3.105l.002.002ZM37.977 9.361c-2.983 0-4.813 1.736-4.958 4.667V5.63l-3.704.572v17.342h3.704V19.13c.145 2.947 1.975 4.693 4.958 4.693 3.49 0 5.575-2.703 5.575-7.23 0-4.526-2.084-7.232-5.575-7.232Zm-1.682 11.498c-2.108 0-3.47-1.676-3.47-4.27 0-1.27.318-2.343.917-3.106.614-.778 1.497-1.19 2.553-1.19 2.171 0 3.47 1.609 3.47 4.296 0 2.674-1.297 4.27-3.47 4.27ZM53.639 9.361c-2.983 0-4.813 1.736-4.959 4.667V5.63l-3.704.572v17.342h3.704V19.13c.146 2.947 1.976 4.693 4.959 4.693 3.49 0 5.574-2.703 5.574-7.23 0-4.526-2.084-7.232-5.574-7.232Zm-1.682 11.498c-2.108 0-3.47-1.676-3.47-4.27 0-1.27.317-2.343.917-3.106.613-.778 1.496-1.19 2.553-1.19 2.17 0 3.47 1.609 3.47 4.296 0 2.674-1.298 4.27-3.47 4.27ZM59.222 9.637h3.955l3.213 13.88h-3.546l-3.622-13.88Z"
        fill={StyleGuide.colors.iconBlack}
      />
    </Svg>
  );
};

const ClosingCross: React.FC<Props> = ({size}: Props) => {
  return (
    <Svg width={size} height={size} viewBox="0 0 30 30" fill="none">
      <Circle cx={15} cy={15} r={15} fill={StyleGuide.colors.black} />
      <Path
        fillRule="evenodd"
        clipRule="evenodd"
        d="M15 0C6.716 0 0 6.716 0 15c0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15zm-4.337 9.337a.937.937 0 10-1.326 1.326L13.674 15l-4.337 4.337a.937.937 0 101.326 1.326L15 16.326l4.337 4.337a.937.937 0 001.326-1.326L16.326 15l4.337-4.337a.938.938 0 00-1.326-1.326L15 13.674l-4.337-4.337z"
        fill={StyleGuide.colors.white}
      />
    </Svg>
  );
};

const Spinner: React.FC<Props> = ({size}: Props) => {
  return (
    <Svg width={size} height={size} viewBox="0 0 35 35" fill="none">
      <Path
        d="M28.158 6.842c1.842 1.842 3.158 4.079 3.816 6.579h-7.632l3.816-6.579zm-.526-3.684l-7.237 12.631H35c-.658-5.131-3.421-9.736-7.368-12.631zM10.132 33.421c2.237 1.053 4.737 1.58 7.237 1.58 2.631 0 5.131-.527 7.236-1.58L17.5 20.79 10.132 33.42zM20.263 19.079L27.5 31.71c4.079-2.894 6.842-7.368 7.237-12.631H20.263zM24.737 1.579C22.5.526 20 0 17.5 0c-2.632 0-5.132.526-7.237 1.579L17.5 14.21 24.737 1.58zM14.605 19.079H0c.526 5.263 3.29 9.737 7.237 12.631l7.368-12.631zM14.605 15.79L7.368 3.157C3.29 6.053.526 10.526.132 15.789h14.473z"
        fill={StyleGuide.colors.iconBlack}
        fillOpacity={0.7}
      />
    </Svg>
  );
};

const SnippetLogo: React.FC<Props> = ({size: width}: {size: number}) => {
  const RATIO = 134 / 54;
  const height = width / RATIO;
  return (
    <Svg width={width} height={height} viewBox="0 0 134 54" fill="none">
      <Path
        d="M123.618 0H10.382C4.648 0 0 4.703 0 10.504v32.992C0 49.297 4.648 54 10.382 54h113.236C129.352 54 134 49.297 134 43.496V10.504C134 4.703 129.352 0 123.618 0Z"
        fill="url(#a)"
      />
      <Path
        d="M115.968 17.13 108.8 44.816l-.016.063h5.581l7.194-27.749h-5.591ZM27.28 32.883a5.987 5.987 0 0 1-2.691.624c-2.011 0-3.152-.325-3.276-1.97v-.11c0-.066-.008-.136-.008-.2v-4.774l.008-.565v-3.37h-.008V21.07l.008-.569v-3.255l-4.985.667c3.376-.662 5.311-3.363 5.311-6.051v-1.655h-5.607v7.752l-.317.09v14.353c.185 4.033 2.816 6.43 7.121 6.43a11.314 11.314 0 0 0 4.487-.94l.028-.012v-5.035l-.071.038Z"
        fill={StyleGuide.colors.iconBlack}
      />
      <Path
        d="M28.163 16.087 12.441 18.54v4.034l15.722-2.452v-4.035ZM28.163 21.988l-15.722 2.453v3.853l15.722-2.452v-3.854ZM45.806 23.844c-.223-4.477-2.99-7.136-7.5-7.136-2.593 0-4.73 1.014-6.18 2.932-1.451 1.918-2.21 4.722-2.21 8.13 0 3.407.764 6.22 2.21 8.14 1.445 1.917 3.587 2.93 6.18 2.93 4.51 0 7.277-2.67 7.5-7.174v6.751h5.601V17.181l-5.601.873v5.79Zm.29 3.926c0 3.97-2.059 6.533-5.246 6.533-3.286 0-5.248-2.442-5.248-6.533 0-4.116 1.962-6.574 5.248-6.574 1.598 0 2.933.63 3.86 1.822.908 1.165 1.386 2.81 1.386 4.752ZM67.748 16.709c-4.512 0-7.28 2.657-7.5 7.142V10.999l-5.603.875V38.41h5.603v-6.76c.22 4.511 2.988 7.182 7.5 7.182 5.28 0 8.432-4.134 8.432-11.062 0-6.928-3.153-11.061-8.433-11.061ZM65.2 34.303c-3.188 0-5.248-2.564-5.248-6.533 0-1.943.48-3.587 1.388-4.748.926-1.192 2.262-1.822 3.86-1.822 3.286 0 5.248 2.458 5.248 6.574.004 4.087-1.958 6.529-5.244 6.529H65.2ZM91.442 16.709c-4.512 0-7.28 2.657-7.5 7.142V10.999l-5.602.875V38.41h5.593v-6.76c.22 4.511 2.99 7.182 7.5 7.182 5.28 0 8.432-4.134 8.432-11.062 0-6.928-3.151-11.061-8.423-11.061Zm-2.547 17.594c-3.189 0-5.248-2.564-5.248-6.533 0-1.943.478-3.587 1.386-4.748.928-1.192 2.263-1.822 3.861-1.822 3.285 0 5.247 2.458 5.247 6.574-.003 4.087-1.964 6.529-5.247 6.529ZM99.878 17.13h5.983l4.86 21.241h-5.363l-5.48-21.24Z"
        fill={StyleGuide.colors.iconBlack}
      />
      <Defs>
        <LinearGradient
          id="a"
          x1={0}
          y1={26.999}
          x2={134}
          y2={26.999}
          gradientUnits="userSpaceOnUse">
          <Stop stopColor="#3BFF9D" />
          <Stop offset={1} stopColor="#3BFFC8" />
        </LinearGradient>
      </Defs>
    </Svg>
  );
};

const Round1: React.FC<Props> = ({size, fill = '#54545C'}: Props) => {
  return (
    <Svg width={size} height={size} viewBox="0 0 26 26" fill="none">
      <Circle
        cx={13}
        cy={13}
        r={12.5}
        stroke={fill}
        fill={StyleGuide.colors.white}
        strokeWidth={1}
      />
      <Path d="M24 12c0-5.523-4.925-10-11-10v10h11z" fill={fill} />
    </Svg>
  );
};

const Round2: React.FC<Props> = ({size, fill = '#54545C'}: Props) => {
  return (
    <Svg width={size} height={size} viewBox="0 0 26 26" fill="none">
      <Circle
        cx={13}
        cy={13}
        r={12.5}
        fill={StyleGuide.colors.white}
        stroke={fill}
        strokeWidth={1}
      />
      <Path d="M13 24c6.075 0 11-4.925 11-11S19.075 2 13 2v22z" fill={fill} />
    </Svg>
  );
};

const Round3: React.FC<Props> = ({size, fill = '#54545C'}: Props) => {
  return (
    <Svg width={size} height={size} viewBox="0 0 26 26" fill="none">
      <Circle
        cx={13}
        cy={13}
        r={12.5}
        fill={StyleGuide.colors.white}
        stroke={fill}
        strokeWidth={1}
      />
      <Path
        d="M13 24c6.075 0 11-4.925 11-11S19.075 2 13 2v11H2c0 6.075 4.925 11 11 11z"
        fill={fill}
      />
    </Svg>
  );
};

const Round4: React.FC<Props> = ({size, fill = '#54545C'}: Props) => {
  return (
    <Svg width={size} height={size} viewBox="0 0 26 26" fill="none">
      <Circle
        cx={13}
        cy={13}
        r={12.5}
        stroke={fill}
        fill={StyleGuide.colors.white}
        strokeWidth={1}
      />
      <Circle cx={13} cy={13} r={11} fill={fill} />
    </Svg>
  );
};

const ArrowRight: React.FC<Props> = ({size, fill}: Props) => {
  return (
    <Svg width={size} height={size} fill="none">
      <Path
        d="m5.009 10.13 4.124-4.125M5.009 6.005h4.125v4.125"
        stroke={fill}
        strokeWidth={2}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </Svg>
  );
};

export {
  ArrowRight,
  Spinner,
  BrandLogo,
  ClosingCross,
  SnippetLogo,
  Round1,
  Round2,
  Round3,
  Round4,
};