<template>
  <div
    class="snackbar"
    :class="`size-${size == 'full' ? 'full' : 'normal'}`"
    
  >
    <div
      class="wrap-snackbar flex justify-between"
      :class="`${variant} ${description ? 'py-4' : 'py-2'}`"
      :style="{width: width, height: height}"
    >
      <div class="flex items-center">
        <base-icon
          v-if="useIcon"
          :iconName="dataVariant.icon"
          width="20"
          height="20"
          class="mr-3"
          :color="dataVariant.color"
        />
        <div>
          <typo-text :variant="`body-1-${description ? 'bold' : 'regular'}`" v-html="title" />
          <typo-text v-if="description" variant="body-1-regular" class="mt-1" v-html="description" />
        </div>
      </div>
      <div
        class="action"
        :class="{
          'items-center': !description,
          'items-start': description,
        }"
      >
        <slot name="action" />
      </div>
    </div>
  </div>
</template>

<script>
import BaseIcon from "@/components/Base/BaseIcon";
import TypoText from "@/components/Typography/TypoText";

export default {
  components: {
    BaseIcon,
    TypoText,
  },
  props: {
    title: {
      type: [String],
    },
    description: {
      type: [String],
    },
    variant: {
      type: [String],
      validator: function (value) {
        return ["danger", "success", "warning", "info"].indexOf(value) !== -1;
      },
    },
    size: {
      type: [String],
      validator: function (value) {
        return ["full"].indexOf(value) !== -1;
      },
    },
    useIcon: {
      type: [Boolean],
      default: false,
    },
    width: {
      type: [String],
      default: ""
    },
    height: {
      type: [String],
      default: ""
    }
  },
  data() {
    return {
      listVariant: [
        {
          variant: "danger",
          color: "#E03021",
          icon: "error_outline",
        },
        {
          variant: "success",
          color: "#0FA85E",
          icon: "check_circle_outline",
        },
        {
          variant: "warning",
          color: "#FAB303",
          icon: "warning_amber",
        },
        {
          variant: "info",
          color: "#3E7DC0",
          icon: "info_outline",
        },
      ],
      dataVariant: {},
    };
  },
  watch: {
    variant() {
      this.getVariant();
    },
  },
  mounted() {
    this.getVariant();
    let _this = this
    if (document.getElementById("actionBtn")) {
      document.getElementById("actionBtn").onclick = function() {
        _this.$emit("clickAction")
      }
    }
  },
  methods: {
    getVariant() {
      let _this = this;
      let checkVariant = this.listVariant.filter(function (variant) {
        return variant.variant == _this.variant;
      });
      if (checkVariant.length != 0) {
        this.dataVariant = checkVariant[0];
      }
    },
  },
};
</script>

<style lang="scss">
@use "@/assets/style/_color.scss" as *;

.snackbar {
  .wrap-snackbar {
    border-radius: 6px;
    padding-left: 16px;
    padding-right: 16px;
    line-height: 140%;
    font-size: 14px;
    color: $neutral-6;

    svg {
      min-width: fit-content;
      align-self: flex-start;
    }

    p {
      line-height: 140%;
    }

    .action {
      display: flex;
      margin-left: 12px;
      cursor: pointer;

      svg {
        width: 16px;
        height: 16px;
      }

      .tertiary-btn {
        padding: 0px;
        font-size: 12px;
        font-weight: 400;
      }
    }
  }

  .danger {
    background: $critical-1;
    border: 1px solid $critical-2;

    .action {
      svg > g {
        fill: $critical-4;
      }
    }

    .tertiary-btn {
      color: $critical-4;
    }
  }

  .success {
    background: $success-1;
    border: 1px solid $success-2;

    .action {
      svg > g {
        fill: $success-4;
      }
    }

    .tertiary-btn {
      color: $success-4;
    }
  }

  .warning {
    background: $warning-1;
    border: 1px solid $warning-3;

    .action {
      svg > g {
        fill: $warning-5;
      }
    }

    .tertiary-btn {
      color: $warning-5;
    }
  }

  .info {
    background: $dark-blue-1;
    border: 1px solid $dark-blue-3;

    .action {
      svg > g {
        fill: $dark-blue-4;
      }
    }

    .tertiary-btn {
      color: $dark-blue-4;
    }
  }

  &.size-full {
    width: 100%;

    .wrap-snackbar {
      border-radius: 0px;
      border-top: none;
      border-left: none;
      border-right: none;
    }
  }

  &.size-normal {
    max-width: 400px;
  }
}
</style>
