<template>
  <div class="y-button" :style="{ '--w': width + 'px' }">
    <button
      type="button"
      :style="{ '--w': width + 'px' }"
      :class="{ animating: active, active: value }"
      @click="clickHandler"
      @animationend="animationend"
    >
      <span>
        <b></b>
        <svg viewBox="-5.5 -5.5 71 71" id="circle">
          <circle
            cx="30"
            cy="30"
            r="30"
            stroke="white"
            stroke-width="11"
            fill="transparent"
          ></circle>
        </svg>
      </span>
    </button>
    <div :class="['text', { active: value }]">
      <!-- <span class="on">
        <span>
          {{ activeText }}
        </span>
      </span>
      <span class="off">
        <span>
          {{ unActiveText }}
        </span>
      </span> -->

      {{ value ? activeText : unActiveText }}
    </div>
  </div>
</template>

<script>
export default {
  model: {
    prop: "checked",
    event: "change",
  },
  props: {
    width: {
      type: Number,
      default: 84,
    },
    checked: {
      required: true,
    },
    activeText: {
      default: "ON",
    },
    unActiveText: {
      default: "OFF",
    },
  },
  data() {
    return {
      active: false,
    };
  },
  computed: {
    value() {
      return this.checked === 1 || this.checked === "1";
    },
  },
  methods: {
    clickHandler() {
      this.active = true;
    },
    animationend() {
      this.active = false;
      this.$emit("change", this.checked ? 0 : 1);
    },
  },
};
</script>

<style lang="less" scoped>
@keyframes c {
  to {
    transform: none;
  }
}
.y-button {
  --timing: cubic-bezier(0.645, 0.045, 0.355, 1);
  --primary: #f4f7f5;
  width: var(--w);

  button {
    --bg: rgb(var(--rgb));
    --bga: rgba(var(--rgb), 0.4);
    /* Safari fix */
    -webkit-appearance: none;
    border: none;
    font-size: 100%;
    width: var(--w);
    height: var(--w);
    background: var(--bg);
    box-shadow: 0 3px 12px 2px var(--bga);
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: 0.1s transform, 0.3s box-shadow;
    will-change: transform, box-shadow;
    backface-visibility: hidden;
  }
  button > * {
    pointer-events: none;
  }
  button:focus {
    outline: none;
  }
  button:active {
    transform: scale(0.97);
  }
  button:after {
    --bg: rgb(var(--rgb));
    content: "";
    position: absolute;
    top: -15%;
    left: -15%;
    width: 200%;
    height: 200%;
    background: var(--bg);
    border-radius: inherit;
    transform: translate(5%, 5%) scale(0.03);
    pointer-events: none;
  }
  button.animating:after {
    animation: c 0.5s cubic-bezier(0.5, 0, 0.5, 1) backwards;
  }
  button.active,
  button:not(.active):after {
    --rgb: 64, 227, 120;
  }
  button:not(.active),
  button.active:after {
    --rgb: 229, 55, 94;
  }

  button span {
    display: inline-block;
    position: relative;
    margin-top: 5px;
  }
  button b {
    --w: 7px;
    overflow: hidden;
    border-radius: var(--w);
    display: grid;
    width: var(--w);
    height: 35px;
    top: 0;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    z-index: 3;
    will-change: transform;
  }
  button b:before {
    content: "";
    background: #fff;
    width: 100%;
    height: 100%;
    border-radius: var(--w);
    transform: translateY(-15px);
    transition-timing-function: var(--timing);
    transition: 0.5s;
  }
  button.active b:before {
    transform: translateY(12px);
    transition-delay: 0.27s;
    transition-timing-function: cubic-bezier(0.25, 0.25, 0.25, 1.25);
  }
  button svg {
    --dash: 190;
    stroke-linecap: round;
    stroke-dasharray: var(--dash);
    stroke-dashoffset: var(--dash);
    width: 46px;
    height: 46px;
    transform: scaleX(-1) rotate(-89deg);
    transition: 0.4s;
    transition-timing-function: var(--timing);
    margin: auto;
    position: relative;
    z-index: 1;
    will-change: transform, stroke-dashoffset;
  }
  button:not(.active) svg {
    stroke-dashoffset: 40;
    transform: scaleX(-1) rotate(-52deg);
    transition: 0.5s 0.25s;
  }
  aside {
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 0 2em 2em;
    font-family: "Pacifico", cursive;
  }
  aside a {
    text-decoration: underline;
    color: #e65289;
    display: flex;
    align-items: center;
  }
  aside a:hover,
  aside a:focus {
    color: #000;
    text-decoration: none;
  }
  .dribbble-logo {
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }
  .text {
    width: 100%;
    margin-top: 10px;
    font-size: 22px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #c9c9c9;
    text-align: center;
  }
}
</style>
