<template>
  <div class="fs-campaign">
    <div class="fs-campaign__toolbar">
      <i-switch
        v-model="enableAuto"
        class="fs-campaign__switch"
        @on-change="SetShopeeFlashsaleCampaignAuto($event)"
      />
      <span
        v-if="enableAuto"
        class="fs-campaign__switch-label is-active"
      >
        {{ $t("FLASHSALE_CAMPAIGN_JOB_AUTO_ON") }}
      </span>
      <span
        v-else
        class="fs-campaign__switch-label"
      >
        {{ $t("FLASHSALE_CAMPAIGN_JOB_AUTO_OFF") }}
      </span>
    </div>
    <div>
      <Tabs
        v-model="tabActive"
        :value="tabActive"
        :animated="false"
      >
        <TabPane
          :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_LIST')"
          name="list"
        >
          <div v-if="listCampaignShow.length">
            <div v-if="warningTimeSlot">
              <Alert
                type="warning"
                show-icon
              >
                {{ warningTimeSlot }}
              </Alert>
            </div>
            <div
              v-else
              class="mt-10"
            >
              <Alert
                type="info"
                show-icon
              >
                {{ logMessage || $t('FLASHSALE_CAMPAGIN_HOW_TO_USE') }}
              </Alert>
            </div>

            <List
              :data="listCampaignShow"
              class="fs-campaign__list"
            >
              <ListItem
                v-for="item in listCampaignShow"
                :key="item._id"
                class="fs-campaign__item"
              >
                <ListItemMeta>
                  <template #title>
                    <div class="fs-campaign__title">
                      <Checkbox
                        v-model="item.active"
                        v-tooltip="$t('SWITCH_ACTIVE')"
                        :value="item.active"
                        @on-change="toggleCampaign(item,$event)"
                      />
                      <a
                        :href="openFlashsaleId(item.flashsaleIdClone)"
                        target="_blank"
                        class="fs-campaign__link"
                      >
                        <b class="fs-campaign__slot">[{{ $t('FLASHSALE_TIME_SLOT_LABEL',{start : item.timeSlotStart,end : item.timeSlotEnd}) }}]</b>
                        <span class="fs-campaign__name">{{ $t('FLASHSALE_CAMPAGIN_NAME_LABEL',{name : item.campaignName, product: item.productCount}) }}</span>
                      </a>
                    </div>
                  </template>
                  <template #description>
                    <div
                      v-if="false"
                      class="fs-campaign__meta"
                    >
                      <span>{{ $t('FLASHSALE_CAMPAGIN_SCHEDULER_PICK_TIME_RUN_RANGE') }}: </span>
                      <span>{{ $d(new Date(item.timeCampaginStart),'short') }} → {{ $d(new Date(item.timeCampaginEnd),'short') }}</span>
                    </div>
                    <span class="fs-campaign__meta">{{ $t('FLASHSALE_CAMPAGIN_SCHEDULER_TIME_BEFORE_LABEL',{hour : item.timeFlashsaleBefore, day : (item.timeSchedulerBefore / 24)}) }}</span>
                  </template>
                </ListItemMeta>

                <template #action>
                  <div>
                    <Button
                      type="text"
                      size="small"
                      class="fs-campaign__remove"
                      @click="removeCampaign(item)"
                    >
                      {{ $t("BTN_REMOVE_CONFIG") }}
                    </Button>
                  </div>

                  <Button
                    type="info"
                    size="small"
                    :loading="item.loading"
                    @click="runCampaign(item)"
                  >
                    {{ $t("BTN_RUN_CONFIG") }}
                  </Button>
                </template>
              </ListItem>
            </List>
          </div>
          <div v-else-if="isEmpty">
            <Alert
              type="warning"
              show-icon
            >
              {{ $t('FLASH_SALE_CAMPAIGN_EMPTY') }}
            </Alert>
          </div>
        </TabPane>
        <TabPane
          :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_CREATE')"
          name="create"
        >
          <Row>
            <Col
              :span="18"
              :offset="3"
            >
              <Row>
                <Col :span="24">
                  <Form
                    :model="createCampaign"
                    :label-width="240"
                  >
                    <FormItem :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_INPUT_NAME')">
                      <Input
                        v-model="createCampaign.campaignName"
                        :placeholder="$t('ENTER_CAMPAIGN_NAME')"
                      />
                    </FormItem>

                    <FormItem :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_SELECT_FLASHSALE')">
                      <Select v-model="createCampaign.flashsaleIdClone">
                        <Option
                          v-for="flashsale in listFlashsale"
                          :key="flashsale.flashSaleId"
                          :value="flashsale.flashSaleId"
                        >
                          {{ flashsale.name }}
                        </Option>
                      </Select>
                      <div class="fs-campaign__preview">
                        <a
                          v-if="createCampaign.flashsaleIdClone"
                          :href="openFlashsaleId(createCampaign.flashsaleIdClone)"
                          target="_blank"
                          class="fs-campaign__link"
                        >
                          {{ $t("OPEN_PREVIEW_NAME", {name: listFlashsale.find((item) => item.flashSaleId === createCampaign.flashsaleIdClone).name}) }}
                        </a>
                      </div>
                      <Alert
                        v-if="!listFlashsale.length"
                        type="warning"
                        show-icon
                      >
                        {{ $t('FLASHSALE_CAMPAGIN_PLEASE_SAVE_ANY_FLASHSALE_CLONE') }}
                      </Alert>
                    </FormItem>

                    <FormItem :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_PICK_TIME_SLOT_RANGE')">
                      <Row>
                        <Col span="11">
                          <Select v-model="createCampaign.timeSlotStart">
                            <Option
                              v-for="timeSlot in listTimeSlot"
                              :key="timeSlot.value.toString()"
                              :value="timeSlot.value"
                            >
                              {{ timeSlot.label }}
                            </Option>
                          </Select>
                        </Col>
                        <Col
                          span="2"
                          style="text-align: center"
                        >
                          -
                        </Col>
                        <Col span="11">
                          <Select v-model="createCampaign.timeSlotEnd">
                            <Option
                              v-for="timeSlot in listTimeSlot"
                              :key="timeSlot.value.toString()"
                              :value="timeSlot.value"
                            >
                              {{ timeSlot.label }}
                            </Option>
                          </Select>
                        </Col>
                      </Row>
                    </FormItem>
                    <FormItem :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_TIME_BEFORE_FLASHSALE')">
                      <InputNumber
                        v-model="createCampaign.timeFlashsaleBefore"
                        :min="6"
                        controls-outside
                        class="w-150"
                      />
                    </FormItem>

                    <FormItem :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_TIME_BEFORE_SCHEDULER')">
                      <InputNumber
                        v-model="createCampaign.daySchedulerBefore"
                        :min="2"
                        controls-outside
                        class="w-150"
                      />
                    </FormItem>
                    <FormItem
                      v-if="false"
                      :label="$t('FLASHSALE_CAMPAGIN_SCHEDULER_PICK_TIME_RUN_RANGE')"
                    >
                      <Row>
                        <Col span="11">
                          <DatePicker
                            v-model="createCampaign.timeCampaginStart"
                            type="date"
                          />
                        </Col>
                        <Col
                          span="2"
                          style="text-align: center"
                        >
                          -
                        </Col>
                        <Col span="11">
                          <DatePicker
                            v-model="createCampaign.timeCampaginEnd"
                            type="date"
                          />
                        </Col>
                      </Row>
                    </FormItem>
                  </Form>

                  <div class="fs-campaign__submit">
                    <div class="fs-campaign__submit-bar">
                      <span
                        v-if="validateErrorMessage"
                        class="fs-campaign__hint"
                      >
                        {{ validateErrorMessage }}
                      </span>
                      <Button
                        type="primary"
                        :disabled="btnDisabled"
                        :loading="btnLoading"
                        @click="handlerCreate"
                      >
                        {{ $t('FLASHSALE_CAMPAGIN_SCHEDULER_CREATE_BTN') }}
                      </Button>
                    </div>
                    <div
                      v-if="errorMessage "
                      class="fs-campaign__hint is-error"
                    >
                      {{ errorMessage }}
                    </div>
                  </div>
                </Col>
              </Row>
            </Col>
          </Row>
          <div
            v-if="campaginDescription"
            class="fs-campaign__tip is-warning"
          >
            {{ campaginDescription }}
          </div>
          <div
            v-else
            class="fs-campaign__tip"
          >
            <i>{{ $t('FLASHSALE_CAMPAGIN_SCHEDULER_CREATE_TIP') }}</i>
          </div>
        </TabPane>
      </Tabs>
    </div>
  </div>
</template>

<script>
import mixin from './mixin/Campaign';

export default {
  name: 'ShopeeFlashsaleCampagin',
  mixins: [mixin],
};
</script>

<style lang="scss" scoped>
@import '@/vue/styles/tokens.scss';

.fs-campaign {
  &__toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 12px;
  }

  &__switch-label {
    font-size: 13px;
    font-weight: 500;
    color: $c-text-muted;
    transition: color $motion-fast;

    &.is-active {
      color: $c-success;
    }
  }

  &__item.ivu-list-item {
    padding: 12px 14px;
    border-radius: $radius-card;
    border-bottom: 1px solid $c-border;
    transition: background $motion-fast;

    &:hover {
      background: $c-surface-soft;
    }
  }

  &__title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  &__link {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
    color: $c-link;
    text-decoration: none;
    transition: color $motion-fast;

    &:hover {
      color: $c-link-hover;
      text-decoration: underline;
    }
  }

  &__slot {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: $c-brand;
  }

  &__name {
    font-size: 14px;
    font-weight: 500;

    @include ellipsis;
  }

  &__meta {
    font-size: 12px;
    color: $c-text-muted;
  }

  &__remove.ivu-btn {
    color: $c-text-muted;
    transition: color $motion-fast;

    &:hover {
      color: $c-error;
    }
  }

  &__preview {
    margin-top: 4px;
    text-align: right;
    font-size: 12px;
  }

  &__submit {
    margin-top: 12px;
  }

  &__submit-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  &__hint {
    font-size: 12px;
    color: $c-text-muted;

    &.is-error {
      margin-top: 6px;
      color: $c-error;
    }
  }

  &__tip {
    margin-top: 12px;
    font-size: 13px;
    color: $c-text-muted;

    &.is-warning {
      color: $c-warning;
    }
  }
}
</style>
