<template>
  <svg
    :viewBox="viewbox"
    :style="svg"
    preserveAspectRatio="xMidYMid meet">
    <rect
      :style="rect.style"
      :clip-path="rect.clipPath"
      x="0"
      y="0"
      :width="width"
      :height="height" />

    <defs>
      <clipPath :id="clipPathId">
        <slot>
          <circle
            cx="30"
            cy="30"
            r="30" />
          <rect
            x="75"
            y="13"
            rx="4"
            ry="4"
            width="100"
            height="13" />
          <rect
            x="75"
            y="37"
            rx="4"
            ry="4"
            width="50"
            height="8" />
          <rect
            x="0"
            y="70"
            rx="5"
            ry="5"
            width="400"
            height="400" />
        </slot>
      </clipPath>

      <linearGradient :id="gradientId">
        <stop
          offset="0%"
          :stop-color="primary">
          <animate
            attributeName="offset"
            values="-2; 1"
            :dur="formatedSpeed"
            repeatCount="indefinite" />
        </stop>

        <stop
          offset="50%"
          :stop-color="secondary">
          <animate
            attributeName="offset"
            values="-1.5; 1.5"
            :dur="formatedSpeed"
            repeatCount="indefinite" />
        </stop>

        <stop
          offset="100%"
          :stop-color="primary">
          <animate
            attributeName="offset"
            values="-1; 2"
            :dur="formatedSpeed"
            repeatCount="indefinite" />
        </stop>
      </linearGradient>
    </defs>
  </svg>
</template>

<script>
import { isColor } from '../../helpers';

/**
 * It's essentially a wireframe of the page with placeholder boxes for text and images.
 */
export default {
  name: 'MLoadingState',

  props: {
    rtl: {
      default: false,
      type: Boolean,
    },

    speed: {
      default: 2,
      type: Number,
    },

    width: {
      default: 400,
      type: Number,
    },

    height: {
      default: 480,
      type: Number,
    },

    primary: {
      type: String,
      default: '#f0f0f0',
      validator: (color) => isColor(color),
    },

    secondary: {
      type: String,
      default: '#e0e0e0',
      validator: (color) => isColor(color),
    },
  },

  data: () => ({
    uid: null,
  }),

  computed: {
    viewbox() {
      return `0 0 ${this.width} ${this.height}`;
    },

    formatedSpeed() {
      return `${this.speed}s`;
    },

    gradientId() {
      return `gradient-${this.uid}`;
    },

    clipPathId() {
      return `clipPath-${this.uid}`;
    },

    svg() {
      if (this.rtl) {
        return {
          transform: 'rotateY(180deg)',
        };
      }
      return { transform: 'none' };
    },

    rect() {
      return {
        style: {
          fill: `url(#${this.gradientId})`,
        },
        clipPath: `url(#${this.clipPathId})`,
      };
    },
  },

  created() {
    // eslint-disable-next-line no-underscore-dangle
    this.uid = this._uid;
  },
};
</script>
