<template>
  <svg
    v-if="type === 'default'"
    width="197px"
    height="124px"
    viewBox="0 0 197 124"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <linearGradient
        :id="linearGradient1"
        x1="50%"
        y1="-12.2472426%"
        x2="50%"
        y2="144.117647%">
        <stop
          stop-color="#F7F7F7"
          offset="0%" />
        <stop
          stop-color="#FFFFFF"
          offset="39.5615065%" />
        <stop
          stop-color="#FFFFFF"
          offset="100%" />
      </linearGradient>
      <linearGradient
        :id="linearGradient2"
        x1="50%"
        y1="86.3619942%"
        x2="50%"
        y2="0%">
        <stop
          stop-color="#FFFFFF"
          offset="0%" />
        <stop
          stop-color="#F3F3F3"
          offset="100%" />
      </linearGradient>
      <linearGradient
        :id="linearGradient3"
        x1="50%"
        y1="100%"
        x2="50%"
        y2="10.7568642%">
        <stop
          stop-color="#DCE0E5"
          offset="0%" />
        <stop
          stop-color="#DCE0E5"
          offset="100%" />
      </linearGradient>
    </defs>
    <g
      id="Page-1"
      stroke="none"
      stroke-width="1"
      fill="none"
      fill-rule="evenodd">
      <g id="empty">
        <path
          d="M7,104 L191,104 C191,115.045695 177.120827,124 160,124 L38,124 C20.8791728,124 7,115.045695 7,104 Z"
          :fill="`url(#${linearGradient1})`" />
        <path
          id="path-1"
          d="M10.7398629,69.8104063 C-3.5799543,54.6797159 -3.5799543,43.2951152 10.7398629,35.6566042 C25.0596801,28.0180932 32.7836376,21.553487 33.9117355,16.2627857 C36.6779825,10.0206036 41.4727239,8.0285424 48.2959597,10.286602 C56.3224349,13.6736914 54.5610017,1.6530359 59.8423736,1.6530359 C65.1237454,1.6530359 64.1309431,5.9446632 66.6334059,5.5259464 C67.453131,1.7174219 69.560345,-0.1224545 72.9550479,0.0063173 C77.3392762,2.3203082 80.2984188,6.8760995 81.8324758,13.6736914 C84.1335613,23.8700793 89.834066,1.6530359 105.65281,13.6736914 C121.471553,25.6943469 129.848363,-2.6217987 143.63731,5.5259464 C152.829942,10.9577764 155.904399,18.740668 152.860682,28.874621 C161.225131,37.5036345 171.620026,41.8181413 184.045368,41.8181413 C196.470709,41.8181413 199.957794,59.2120942 194.506621,94 L5.1891528,94 L10.7398629,69.8104063 Z"
          :fill="`url(#${linearGradient2})`" />
        <ellipse
          id="oval-1"
          fill="#F7F7F9"
          cx="98.5"
          cy="115"
          rx="46.5"
          ry="9" />
        <path
          d="M80.7927952,73 L113.54489,73 C114.103865,73 114.637333,73.2339246 115.016014,73.6450854 L131,91 L64,91 L79.2934589,73.6763721 C79.6731094,73.246324 80.2191439,73 80.7927952,73 Z"
          fill="#C2CAD3" />
        <path
          d="M83.985841,84 L111.729977,84 C112.949025,84 114.101536,84.555906 114.860411,85.5099439 L124,97 L71,97 L80.9492342,85.3963451 C81.7091593,84.5100549 82.8183666,84 83.985841,84 Z"
          fill="#EBEEF1" />
        <path
          d="M64,91 L82.015625,91 L83.812549,95.725941 C84.1076547,96.502074 84.8516328,97.015137 85.6819761,97.015137 L109.705931,97.015137 C110.527916,97.015137 111.2662,96.512207 111.567105,95.747278 L113.43457,91 L132,91 L132,112 C132,114.209139 130.209139,116 128,116 L68,116 C65.790861,116 64,114.209139 64,112 L64,91 Z"
          :fill="`url(#${linearGradient3})`" />
      </g>
    </g>
  </svg>

  <svg
    v-else-if="type === 'small'"
    width="93px"
    height="51px"
    viewBox="0 0 93 51"
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <g
      stroke="none"
      stroke-width="1"
      fill="none"
      fill-rule="evenodd">
      <ellipse
        fill="#F7F7F9"
        cx="46.5"
        cy="42"
        rx="46.5"
        ry="9" />
      <path
        d="M14.8320994,17.8321501 L46,29.4663023 L77.1521878,17.8380153 L62.6416585,1.0201127 C62.3567185,0.6898633 61.9421386,0.5 61.5059557,0.5 L29.8335468,0.5 C29.3856982,0.5 28.9612754,0.7001112 28.6763292,1.0456167 L14.8320994,17.8321501 Z"
        stroke="#E6E6E6"
        fill="#FFFFFF" />
      <path
        d="M14.5,17.5 L14.5,40 C14.5,43.0375661 16.9624339,45.5 20,45.5 L72,45.5 C75.0375661,45.5 77.5,43.0375661 77.5,40 L77.5,17.5 L59.7751775,17.5 L58.0323982,21.9303134 C57.6562672,22.8864746 56.7334123,23.5151367 55.7059305,23.5151367 L35.6819761,23.5151367 C34.6440469,23.5151367 33.7140744,22.8738083 33.3451923,21.9036419 L31.6708146,17.5 L14.5,17.5 Z"
        stroke="#E6E6E6"
        fill="#FAFAFA" />
    </g>
  </svg>
</template>

<script>
import uniqueId from "lodash/uniqueId"

export default {
  name: "mm-empty-icon",
  components: {},
  props: {
    type: {
      type: String,
      validator: value => ["default", "small"].includes(value),
      default: "default",
    },
  },
  data() {
    const id = uniqueId()

    return {
      linearGradient1: `linearGradient1-${id}`,
      linearGradient2: `linearGradient2-${id}`,
      linearGradient3: `linearGradient3-${id}`,
    }
  },
}
</script>
