import React from 'react';
import { createUseStyles } from 'react-jss';

const svg = `
<svg
    version="1.1"
    id="cloudFogAlt"
    class="climacon climacon_cloudFogAlt"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px"
    y="0px"
    viewBox="15 15 70 70"
    enable-background="new 15 15 70 70"
    xml:space="preserve">
    <style type="text/css"><![CDATA[

        svg{
            shape-rendering: geometricPrecision
        }

        g, path, circle, rect{
            -webkit-transform-origin: 50% 50%;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-duration: 12s;
            -webkit-animation-direction: normal;
            -moz-transform-origin: 50% 50%;
            -moz-animation-iteration-count: infinite;
            -moz-animation-timing-function: linear;
            -moz-animation-duration: 12s;
            -moz-animation-direction: normal;
            -o-transform-origin: 50% 50%;
            -o-animation-iteration-count: infinite;
            -o-animation-timing-function: linear;
            -o-animation-duration: 12s;
            -o-animation-direction: normal;
            transform-origin: 50% 50%;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            animation-duration: 12s;
            animation-direction: normal;
        }

        /* FOG */
        .climacon_component-stroke_fogLine {
          fill-opacity: 0.5;
          
          -webkit-animation-name: translateFog, fillOpacityFog;
          -moz-animation-name: translateFog, fillOpacityFog;
          -o-animation-name: translateFog, fillOpacityFog;
          animation-name: translateFog, fillOpacityFog;

          -webkit-animation-iteration-count: infinite;
          -moz-animation-iteration-count: infinite;
          -o-animation-iteration-count: infinite;
          animation-iteration-count: infinite;

          -webkit-animation-direction: normal;
          -moz-animation-direction: normal;
          -o-animation-direction: normal;
          animation-direction: normal;

          -webkit-animation-timing-function: ease-in;
          -moz-animation-timing-function: ease-in;
          -o-animation-timing-function: ease-in;
          animation-timing-function: ease-in;

          -webkit-animation-duration: 12s;
          -moz-animation-duration: 12s;
          -o-animation-duration: 12s;
          animation-duration: 12s;

        }

        .climacon_component-stroke_fogLine:nth-child(even) {
          -webkit-animation-delay: 6s;
          -moz-animation-delay: 6s;
          -o-animation-delay: 6s;
          animation-delay: 6s;
        }

        @-webkit-keyframes translateFog {
          0% {
            -webkit-transform: translateY(0);
          }

          25% {
            -webkit-transform: translateX(2.5px);
          }

          75% {
            -webkit-transform: translateX(-2.5px);
          }

          100% {
            -webkit-transform: translateX(0);
          }
        }

        @-moz-keyframes translateFog {
          0% {
            -moz-transform: translateY(0);
          }

          25% {
            -moz-transform: translateX(2.5px);
          }

          75% {
            -moz-transform: translateX(-2.5px);
          }

          100% {
            -moz-transform: translateX(0);
          }
        }

        @-o-keyframes translateFog {
          0% {
            -o-transform: translateY(0);
          }

          25% {
            -o-transform: translateX(2.5px);
          }

          75% {
            -o-transform: translateX(-2.5px);
          }

          100% {
            -o-transform: translateX(0);
          }
        }

        @keyframes translateFog {
          0% {
            transform: translateY(0);
          }

          25% {
            transform: translateX(2.5px);
          }

          75% {
            transform: translateX(-2.5px);
          }

          100% {
            transform: translateX(0);
          }
        }
        @-webkit-keyframes fillOpacityFog {
          0% {
            fill-opacity: 0.5;
            stroke-opacity: 0.5;
          }

          50% {
            fill-opacity: 1;
            stroke-opacity: 1;
          }

          100% {
            fill-opacity: 0.5;
            stroke-opacity: 0.5;
          }
        }

        @-moz-keyframes fillOpacityFog {
          0% {
            fill-opacity: 0.5;
            stroke-opacity: 0.5;
          }

          50% {
            fill-opacity: 1;
            stroke-opacity: 1;
          }

          100% {
            fill-opacity: 0.5;
            stroke-opacity: 0.5;
          }
        }

        @-o-keyframes fillOpacityFog {
          0% {
            fill-opacity: 0.5;
            stroke-opacity: 0.5;
          }

          50% {
            fill-opacity: 1;
            stroke-opacity: 1;
          }

          100% {
            fill-opacity: 0.5;
            stroke-opacity: 0.5;
          }
        }

        @keyframes fillOpacityFog {
          0% {
            fill-opacity: 0.5;
            stroke-opacity: 0.5;
          }

          50% {
            fill-opacity: 1;
            stroke-opacity: 1;
          }

          100% {
            fill-opacity: 0.5;
            stroke-opacity: 0.5;
          }
        }

    ]]></style>

    <g class="climacon_iconWrap climacon_iconWrap-cloudFogAlt">
        <g class="climacon_wrapperComponent climacon_wrapperComponent-Fog">
            <path
            class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
            d="M29.177,55.641c-0.262-0.646-0.473-1.314-0.648-2h43.47c0,0.685-0.069,1.349-0.181,2H29.177z"/>
            <path
            class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
            d="M36.263,35.643c2.294-1.271,4.93-1.999,7.738-1.999c2.806,0,5.436,0.73,7.728,1.999H36.263z"/>
            <path
            class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
            d="M28.142,47.642c0.085-0.682,0.218-1.347,0.387-1.999h40.396c0.552,0.613,1.039,1.281,1.455,1.999H28.142z"/>
            <path
            class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
            d="M29.177,43.643c0.281-0.693,0.613-1.359,0.984-2h27.682c0.04,0.068,0.084,0.135,0.123,0.205c0.664-0.114,1.339-0.205,2.033-0.205c2.451,0,4.729,0.738,6.627,2H29.177z"/>
            <path
            class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
            d="M31.524,39.643c0.58-0.723,1.225-1.388,1.92-2h21.123c0.689,0.61,1.326,1.28,1.902,2H31.524z"/>
            <path
            class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
            d="M71.816,51.641H28.142c-0.082-0.656-0.139-1.32-0.139-1.999h43.298C71.527,50.285,71.702,50.953,71.816,51.641z"/>
            <path
            class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
            d="M71.301,57.641c-0.246,0.699-0.555,1.367-0.921,2H31.524c-0.505-0.629-0.957-1.299-1.363-2H71.301z"/>
            <path
            class="climacon_component climacon_component-stroke climacon_component-stroke_fogLine"
            d="M33.444,61.641h35.48c-0.68,0.758-1.447,1.435-2.299,2H36.263C35.247,63.078,34.309,62.4,33.444,61.641z"/>
        </g>
    </g>
</svg><!--cloudFogAlt -->`;

const useStyles = createUseStyles({
  root: {
    '& svg path,& svg circle,& svg polygon': {
      fill: (props) => props.fill,
      stroke: (props) => props.stroke,
    },
  },
});

const CloudFogAlt = (props) => {
  const classes = useStyles(props);
  return (
    <div className={classes.root} dangerouslySetInnerHTML={{ __html: svg }} />
  );
};

export default CloudFogAlt;
