<script>
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import PipelineStatus from './pipeline_status.vue';
import ValidationSegment from './validation_segment.vue';

const baseClasses = ['gl-p-5', 'gl-bg-gray-10', 'gl-border-solid', 'gl-border-gray-100'];

const pipelineStatusClasses = [
  ...baseClasses,
  'gl-border-1',
  'gl-border-b-0!',
  'gl-rounded-top-base',
];

const validationSegmentClasses = [...baseClasses, 'gl-border-1', 'gl-rounded-base'];

const validationSegmentWithPipelineStatusClasses = [
  ...baseClasses,
  'gl-border-1',
  'gl-rounded-bottom-left-base',
  'gl-rounded-bottom-right-base',
];

export default {
  pipelineStatusClasses,
  validationSegmentClasses,
  validationSegmentWithPipelineStatusClasses,
  components: {
    PipelineStatus,
    ValidationSegment,
  },
  mixins: [glFeatureFlagsMixin()],
  props: {
    ciFileContent: {
      type: String,
      required: true,
    },
    ciConfigData: {
      type: Object,
      required: true,
    },
    isCiConfigDataLoading: {
      type: Boolean,
      required: true,
    },
  },
  computed: {
    showPipelineStatus() {
      return this.glFeatures.pipelineStatusForPipelineEditor;
    },
    // make sure corners are rounded correctly depending on if
    // pipeline status is rendered
    validationStyling() {
      return this.showPipelineStatus
        ? this.$options.validationSegmentWithPipelineStatusClasses
        : this.$options.validationSegmentClasses;
    },
  },
};
</script>
<template>
  <div class="gl-mb-5">
    <pipeline-status v-if="showPipelineStatus" :class="$options.pipelineStatusClasses" />
    <validation-segment
      :class="validationStyling"
      :loading="isCiConfigDataLoading"
      :ci-file-content="ciFileContent"
      :ci-config="ciConfigData"
    />
  </div>
</template>
