<template>
  <p
    class="feedback"
    role="alert"
    :class="[
      `feedback__${messageStyle}`,
      `feedback__${messageStyle}--${messageType}`,
    ]"
  >
    {{ message }}
    <button
      type="button"
      class="feedback__button"
      :class="[
        `feedback__button--${messageStyle}-${messageType}`
      ]"
      @click.stop.prevent="$emit('remove')"
    >
      <cross></cross>
    </button>
  </p>
</template>

<script>
export default {
  name: 'feedback-message',
  components: {
    Cross: () => import('@/components/icons/SmallCrossIcon.vue'),
  },
  props: {
    messageType: {
      type: String,
      required: true,
      default: 'primary',
      validator: (val) => {
        return ['primary', 'success', 'error', 'warning'].indexOf(val) !== -1;
      }
    },
    messageStyle: {
      type: String,
      required: false,
      default: 'filled',
      validator: (val) => {
        return ['filled', 'shadow'].indexOf(val) !== -1;
      }
    },
    message: {
      type: String,
      required: true,
    }
  }
}
</script>

<style lang="scss" scoped>
.feedback {
  position: relative;
  width: 100%;
  height: 40px;
  height: 4rem;
  @include body-small(medium);
  line-height: 40px;
  line-height: 4rem;
  padding: 0px 20px 0px 20px;
  padding: 0rem 2rem 0rem 2rem;
  margin-bottom: 0;
  &__shadow {
    background-color: $white;
    box-shadow: box-shadow(secondary);
    &--primary {
      color: $color-primary;
    }
    &--success {
      color: $color-message-primary;
    }
    &--warning {
      color: $color-message-secondary;
    }
    &--error {
      color: $color-message-tertiary;
    }
  }
  &__filled {
    color: $white;
    &--primary {
      background-color: $color-primary;
    }
    &--success {
      background-color: $color-message-primary;
    }
    &--warning {
      background-color: $color-message-secondary;
    }
    &--error {
      background-color: $color-message-tertiary;
    }
  }
  &__button {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    /deep/
    svg {
      width: 14px;
      height: 14px;
    }
    &--shadow-primary {
      /deep/
      svg {
        use {
          fill: $color-primary;
        }
      }
    }
    &--shadow-success {
      /deep/
      svg {
        use {
          fill: $color-message-primary;
        }
      }
    }
    &--shadow-warning {
      /deep/
      svg {
        use {
          fill: $color-message-secondary;
        }
      }
    }
    &--shadow-error {
      /deep/
      svg {
        use {
          fill: $color-message-tertiary;
        }
      }
    }
  }
}
</style>

