// @flow
import React from 'react';

export type Props = {
  /** Value between 0 and 3 */
  level: number
};

const SentimentBarIcon = ({ level }: Props) => {
  let svg = null;
  if (level === 0) {
    svg = (
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 106 198" className="icon">
        <g fill="none" fillRule="evenodd">
          <path
            stroke="#5ECC6B"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M2.964 1H42c-4.55 18.356-7.161 35.445-7.835 51.267l-32.02-.284C.377 32.834.65 15.84 2.964 1z"
          />
          <path
            stroke="#93E79D"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M2 56h32.603c0 19.132.818 36.132 2.455 51H11.387C7.797 96.91 4.669 79.91 2 56z"
          />
          <path
            stroke="#FBB040"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M12 110h25.286c1.719 16.628 3.808 31.628 6.267 45H30.009C24.575 144.738 18.572 129.738 12 110z"
          />
          <path
            fill="#F75959"
            d="M31.01 158h12.945a465.217 465.217 0 0 0 11.318 39.187C46.988 186.754 38.9 173.692 31.009 158zM97.851 90.798H80.602c-1.049 0-1.899-.837-1.899-1.87 0-1.032.85-1.868 1.9-1.868h14.124c2.4 0 4.352-1.923 4.352-4.285 0-2.363-1.952-4.285-4.352-4.285H80.602c-1.049 0-1.899-.836-1.899-1.868s.85-1.87 1.9-1.87h11.969a3.05 3.05 0 0 0 2.196-.919 2.954 2.954 0 0 0 .854-2.198c-.056-1.597-1.48-2.896-3.17-2.896H75.697c-8.216 0-14.9 6.582-14.9 14.672v13.592c0 8.09 6.684 14.672 14.9 14.672H95.12c2.398 0 4.416-1.852 4.498-4.127a4.22 4.22 0 0 0-1.216-3.133 4.35 4.35 0 0 0-3.132-1.31H80.602c-1.049 0-1.899-.836-1.899-1.869 0-1.032.85-1.869 1.9-1.869H97.85c2.4 0 4.351-1.922 4.351-4.284 0-2.363-1.952-4.285-4.351-4.285zm-22.857 34.567c0 2.7 2.232 4.897 4.974 4.897s4.974-2.197 4.974-4.897v-9.952h-9.245c-.235 0-.468-.01-.703-.019v9.97zM106 95.083c0 3.124-1.826 5.837-4.482 7.16a7.873 7.873 0 0 1 1.893 5.437c-.153 4.264-3.873 7.733-8.292 7.733h-6.381v9.952c0 4.761-3.934 8.635-8.77 8.635-4.836 0-8.77-3.874-8.77-8.635V114.87C63.055 112.88 57 105.627 57 97.003V83.41C57 73.26 65.387 65 75.697 65h16.755c3.774 0 6.833 2.857 6.965 6.502a6.63 6.63 0 0 1-1.18 4.035c2.74 1.294 4.638 4.051 4.638 7.24a7.904 7.904 0 0 1-1.752 4.96c2.868 1.244 4.877 4.067 4.877 7.346z"
          />
        </g>
      </svg>
    );
  } else if (level === 1) {
    svg = (
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 120 198" className="icon">
        <g fill="none" fillRule="evenodd">
          <path
            stroke="#5ECC6B"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M2.964 1H42c-4.55 18.356-7.161 35.445-7.835 51.267l-32.02-.284C.377 32.834.65 15.84 2.964 1z"
          />
          <path
            stroke="#93E79D"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M2 56h32.603c0 19.132.818 36.132 2.455 51H11.387C7.797 96.91 4.669 79.91 2 56z"
          />
          <path
            fill="#FBB040"
            d="M12 110h25.286c1.719 16.628 3.808 31.628 6.267 45H30.009C24.575 144.738 18.572 129.738 12 110z"
          />
          <path
            fill="#F75959"
            d="M31.01 158h12.945a465.217 465.217 0 0 0 11.318 39.187C46.988 186.754 38.9 173.692 31.009 158z"
          />
          <path
            fill="#FBB040"
            d="M76.798 115.851V98.602c0-1.049-.837-1.899-1.87-1.899-1.032 0-1.868.85-1.868 1.9v14.124c0 2.4-1.923 4.352-4.285 4.352-2.363 0-4.285-1.952-4.285-4.352V98.602c0-1.049-.836-1.899-1.868-1.899s-1.87.85-1.87 1.9v11.969a3.05 3.05 0 0 1-.919 2.196 2.954 2.954 0 0 1-2.198.854c-1.597-.056-2.896-1.48-2.896-3.17V93.697c0-8.216 6.582-14.9 14.672-14.9h13.592c8.09 0 14.672 6.684 14.672 14.9v19.422c0 2.398-1.852 4.416-4.127 4.498a4.22 4.22 0 0 1-3.133-1.216 4.35 4.35 0 0 1-1.31-3.132V98.602c0-1.049-.836-1.899-1.869-1.899-1.032 0-1.869.85-1.869 1.9v17.248c0 2.4-1.922 4.351-4.284 4.351-2.363 0-4.285-1.952-4.285-4.351zm34.567-22.857c2.7 0 4.897 2.232 4.897 4.974s-2.197 4.974-4.897 4.974h-9.952v-9.245c0-.235-.01-.468-.019-.703h9.97zM81.083 124c3.124 0 5.837-1.826 7.16-4.482a7.873 7.873 0 0 0 5.437 1.893c4.264-.153 7.733-3.873 7.733-8.292v-6.381h9.952c4.761 0 8.635-3.934 8.635-8.77 0-4.836-3.874-8.77-8.635-8.77H100.87C98.88 81.055 91.627 75 83.003 75H69.41C59.26 75 51 83.387 51 93.697v16.755c0 3.774 2.857 6.833 6.502 6.965a6.63 6.63 0 0 0 4.035-1.18c1.294 2.74 4.051 4.638 7.24 4.638a7.904 7.904 0 0 0 4.96-1.752c1.244 2.868 4.067 4.877 7.346 4.877z"
          />
        </g>
      </svg>
    );
  } else if (level === 2) {
    svg = (
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 108 198" className="icon">
        <g fill="none" fillRule="evenodd">
          <path
            stroke="#5ECC6B"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M2.964 1H42c-4.55 18.356-7.161 35.445-7.835 51.267l-32.02-.284C.377 32.834.65 15.84 2.964 1z"
          />
          <path fill="#93E79D" d="M2 56h32.603c0 19.132.818 36.132 2.455 51H11.387C7.797 96.91 4.669 79.91 2 56z" />
          <path
            fill="#FBB040"
            d="M12 110h25.286c1.719 16.628 3.808 31.628 6.267 45H30.009C24.575 144.738 18.572 129.738 12 110z"
          />
          <path
            fill="#F75959"
            d="M31.01 158h12.945a465.217 465.217 0 0 0 11.318 39.187C46.988 186.754 38.9 173.692 31.009 158z"
          />
          <path
            fill="#93E79D"
            d="M99.851 99.202H82.602c-1.049 0-1.899.837-1.899 1.87 0 1.032.85 1.868 1.9 1.868h14.124c2.4 0 4.352 1.923 4.352 4.285 0 2.363-1.952 4.285-4.352 4.285H82.602c-1.049 0-1.899.836-1.899 1.868s.85 1.87 1.9 1.87h11.969a3.05 3.05 0 0 1 2.196.919c.582.592.885 1.372.854 2.198-.056 1.597-1.48 2.896-3.17 2.896H77.697c-8.216 0-14.9-6.582-14.9-14.672V92.997c0-8.09 6.684-14.672 14.9-14.672H97.12c2.398 0 4.416 1.852 4.498 4.127a4.22 4.22 0 0 1-1.216 3.133 4.35 4.35 0 0 1-3.132 1.31H82.602c-1.049 0-1.899.836-1.899 1.869 0 1.032.85 1.869 1.9 1.869H99.85c2.4 0 4.351 1.922 4.351 4.284 0 2.363-1.952 4.285-4.351 4.285zM76.994 64.635c0-2.7 2.232-4.897 4.974-4.897s4.974 2.197 4.974 4.897v9.952h-9.245c-.235 0-.468.01-.703.019v-9.97zM108 94.917c0-3.124-1.826-5.837-4.482-7.16a7.873 7.873 0 0 0 1.893-5.437c-.153-4.264-3.873-7.733-8.292-7.733h-6.381v-9.952c0-4.761-3.934-8.635-8.77-8.635-4.836 0-8.77 3.874-8.77 8.635V75.13C65.055 77.12 59 84.373 59 92.997v13.594C59 116.74 67.387 125 77.697 125h16.755c3.774 0 6.833-2.857 6.965-6.502a6.63 6.63 0 0 0-1.18-4.035c2.74-1.294 4.638-4.051 4.638-7.24a7.904 7.904 0 0 0-1.752-4.96c2.868-1.244 4.877-4.067 4.877-7.346z"
          />
        </g>
      </svg>
    );
  } else if (level === 3) {
    svg = (
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 129 198" className="icon">
        <g fill="none" fillRule="evenodd">
          <path
            fill="#5ECC6B"
            stroke="#5ECC6B"
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M2.964 1H42c-4.55 18.356-7.161 35.445-7.835 51.267l-32.02-.284C.377 32.834.65 15.84 2.964 1z"
          />
          <path fill="#93E79D" d="M2 56h32.603c0 19.132.818 36.132 2.455 51H11.387C7.797 96.91 4.669 79.91 2 56z" />
          <path
            fill="#FBB040"
            d="M12 110h25.286c1.719 16.628 3.808 31.628 6.267 45H30.009C24.575 144.738 18.572 129.738 12 110z"
          />
          <path
            fill="#F75959"
            d="M31.01 158h12.945a465.217 465.217 0 0 0 11.318 39.187C46.988 186.754 38.9 173.692 31.009 158z"
          />
          <g fill="#5ECC6B" stroke="#5ECC6B" strokeWidth=".835">
            <path d="M81.419 96.227l2.039-2.874a3.92 3.92 0 0 0 .511-3.157l-2.167-8.21c-.417-1.645-1.967-2.802-3.747-2.8a3.898 3.898 0 0 0-2.795 1.128l-3.337 3.277c-.961.894-2.482.943-3.505.112-1.021-.83-1.208-2.264-.428-3.306l3.816-5.16c.19-.255.464-.443.778-.535l7.814-2.183c1.381-.391 2.855.237 3.468 1.476l4.397 8.822c.353.697 1.165 1.07 1.959.9.793-.17 1.358-.838 1.363-1.61V52.94c-.028-1.528 1.255-2.789 2.864-2.814 1.609-.026 2.935 1.193 2.962 2.721l.48 30.58c.005.881.71 1.618 1.632 1.707.924.088 1.77-.497 1.961-1.36l4.862-21.405 2.684-11.207c.287-1.51 1.762-2.548 3.366-2.369a2.915 2.915 0 0 1 1.947 1.175c.45.632.604 1.411.427 2.154l-6.71 31.726c-.176.81.303 1.62 1.123 1.9.821.278 1.732-.06 2.136-.794l8.127-15.082c.661-1.394 2.338-2.073 3.856-1.562.742.296 1.323.871 1.602 1.588.277.692.244 1.46-.092 2.129l-8.989 16.304a27.69 27.69 0 0 0-3.073 8.744c-.267 1.641-.472 3.264-.673 4.865a59.625 59.625 0 0 1-1.637 9.188c-.899 3.103-.121 5.067-4.995 6.801-.752.268-1.456.62-1.456 1.385 0 .764.652 1.383 1.456 1.383 1.529.006 2.161-.534 2.161-.534v4.685c0 .764-.652 1.383-1.457 1.383H82.846c-.805 0-1.456-.619-1.456-1.383v-4.638s.458.166 1.977.142c.804 0 1.456-.62 1.456-1.383 0-.765-.656-1.308-1.456-1.385-2.179-.208-2.363-.947-3.143-3.187a6.991 6.991 0 0 0-1.762-2.532L64.335 99.184a1.337 1.337 0 0 1-.423-.978V87.488c-.006-.75.625-1.366 1.415-1.383a5.988 5.988 0 0 1 4.146 1.607c1.102 1.04 1.722 2.453 1.722 3.928v1.384c.003 1.305.65 2.534 1.748 3.32l2.076 1.481c.948.656 1.777.913 2.93 1.118.043.01.082.016.124.023 1.76.296 2.375-1.81 3.346-2.739m-7.311-3.203V91.64a7.961 7.961 0 0 0-1.79-5.021 5.63 5.63 0 0 0 1.686-1.088l3.363-3.307c.252-.212.6-.288.923-.202.324.087.58.323.679.628l2.172 8.226c.093.328.047.678-.129.973h-.001l-3.085 4.357a4.908 4.908 0 0 1-1.164-.59m40.078-26.98l-4.265 7.912 5.047-23.873a5.302 5.302 0 0 0-.878-4.28c-.898-1.252-2.298-2.099-3.872-2.342-3.129-.405-6.052 1.564-6.687 4.502l-2.682 11.208-2.843 12.512-.337-21.473c-.047-3.057-2.694-5.498-5.911-5.453-3.218.045-5.787 2.56-5.74 5.616V77.18l-2.185-4.368c-1.217-2.475-4.157-3.73-6.913-2.953l-7.835 2.19a4.412 4.412 0 0 0-2.318 1.603l-3.81 5.153a5.006 5.006 0 0 0-.806 4.53c.008.02.02.038.026.06-2.18.251-3.824 2.006-3.831 4.093v10.718c0 1.114.473 2.182 1.31 2.963l14.16 12.71c.466.436.826.963 1.058 1.544.255.6.573 1.175.948 1.714v7.712c0 2.293 1.957 4.151 4.37 4.151h23.303c2.414 0 4.37-1.858 4.37-4.15v-7.578a14.825 14.825 0 0 0 2.73-5.41 61.586 61.586 0 0 0 1.72-9.593c.198-1.57.398-3.161.659-4.769a25.036 25.036 0 0 1 2.778-7.887l9.007-16.337c.7-1.366.777-2.944.215-4.365-.563-1.42-1.716-2.56-3.188-3.149-2.935-1.105-6.267.156-7.6 2.874" />
          </g>
        </g>
      </svg>
    );
  }
  return svg;
};

export default SentimentBarIcon;