<script setup lang="ts">
import { ref, watch } from 'vue'
import moment from 'moment-timezone'
import { defaultTimeZone } from '@/utils/timezone'

const props = defineProps({
  FrequencyData: Object
})

const frequency_data = ref(props.FrequencyData)
const radio = ref(0)
const FrequencyList = ref()
const DailyTime = ref('')
const WeeklyTime = ref('')
const WeeklyDay = ref('')
const WeekDay = ref([
  {
    label: 'Monday',
    value: 'Monday'
  },
  {
    label: 'Tuesday',
    value: 'Tuesday'
  },
  {
    label: 'Wednesday',
    value: 'Wednesday'
  },
  {
    label: 'Thursday',
    value: 'Thursday'
  },
  {
    label: 'Friday',
    value: 'Friday'
  },
  {
    label: 'Saturday',
    value: 'Saturday'
  },
  {
    label: 'Sunday',
    value: 'Sunday'
  }
])
const TimeZone = ref([
  {
    label: 'UTC-08',
    value: 'UTC-08'
  },
  {
    label: 'UTC-07',
    value: 'UTC-07'
  },
  {
    label: 'UTC-06',
    value: 'UTC-06'
  },
  {
    label: 'UTC-05',
    value: 'UTC-05'
  },
  {
    label: 'UTC-04',
    value: 'UTC-04'
  },
  {
    label: 'UTC-03',
    value: 'UTC-03'
  },
  {
    label: 'UTC-02',
    value: 'UTC-02'
  },
  {
    label: 'UTC-01',
    value: 'UTC-01'
  },
  {
    label: 'UTC-00',
    value: 'UTC-00'
  },
  {
    label: 'UTC+01',
    value: 'UTC+01'
  },
  {
    label: 'UTC+02',
    value: 'UTC+02'
  },
  {
    label: 'UTC+03',
    value: 'UTC+03'
  },
  {
    label: 'UTC+04',
    value: 'UTC+04'
  },
  {
    label: 'UTC+05',
    value: 'UTC+05'
  },
  {
    label: 'UTC+05:30',
    value: 'UTC+05:30'
  },
  {
    label: 'UTC+06',
    value: 'UTC+06'
  },
  {
    label: 'UTC+07',
    value: 'UTC+07'
  },
  {
    label: 'UTC+08',
    value: 'UTC+08'
  },
  {
    label: 'UTC+09',
    value: 'UTC+09'
  },
  {
    label: 'UTC+10',
    value: 'UTC+10'
  },
  {
    label: 'UTC+11',
    value: 'UTC+11'
  },
  {
    label: 'UTC+12',
    value: 'UTC+12'
  }
])
const TimeZoneDailySelect = ref()
const TimeZoneWeeklySelect = ref()
TimeZoneDailySelect.value = 'UTC' + moment().tz(moment.tz.guess()).format('Z').slice(0, 3)
TimeZoneWeeklySelect.value = 'UTC' + moment().tz(moment.tz.guess()).format('Z').slice(0, 3)
const isDaily = ref(false)
const isWeekly = ref(false)
let savesubscribeobj: any = {}

watch(
  () => props.FrequencyData,
  (current) => {
    frequency_data.value = current
    FrequencyDataInit()
  }
)

const emits = defineEmits(['ChangeFrequencyAdd'])

// 初始设置Frequency
const FrequencyDataInit = () => {
  if (frequency_data.value?.frequency_type == 'Instant') {
    radio.value = 1
    ChangeFrequency(1)
  } else if (frequency_data.value?.frequency_type == 'Daily') {
    radio.value = 2
    DailyTime.value = frequency_data.value?.daily_time
    TimeZoneDailySelect.value = frequency_data.value?.daily_time_zone
    ChangeFrequency(2)
  } else if (frequency_data.value?.frequency_type == 'Weekly') {
    radio.value = 3
    WeeklyDay.value = frequency_data.value?.weekly_week
    WeeklyTime.value = frequency_data.value?.weekly_time
    TimeZoneWeeklySelect.value = frequency_data.value?.weekly_time_zone
    ChangeFrequency(3)
  } else {
    radio.value = 0
    ChangeFrequency(0)
  }
}

// 更改Frequency时间
const ChangeFrequency = (val: any) => {
  FrequencyList.value = []
  let str: any = ''
  if (val == 1) {
    isDaily.value = false
    isWeekly.value = false
    DailyTime.value = ''
    WeeklyDay.value = ''
    WeeklyTime.value = ''
    str = 'Instant notification for each update'
    FrequencyList.value.push(str)
    savesubscribeobj.frequency_type = 'Instant'
    savesubscribeobj.frequency_display = str
  } else if (val == 2) {
    isDaily.value = true
    isWeekly.value = false
    WeeklyDay.value = ''
    WeeklyTime.value = ''
    str = 'Daily, ' + DailyTime.value + ', ' + TimeZoneDailySelect.value
    if (DailyTime.value != '' && TimeZoneDailySelect.value !== '') {
      FrequencyList.value.push(str)
    }
    savesubscribeobj.frequency_type = 'Daily'
    savesubscribeobj.daily_time = DailyTime.value
    savesubscribeobj.daily_time_zone = TimeZoneDailySelect.value
    savesubscribeobj.frequency_display = str
  } else if (val == 3) {
    isDaily.value = false
    isWeekly.value = true
    DailyTime.value = ''
    str = 'Weekly, ' + WeeklyDay.value + ', ' + WeeklyTime.value + ', ' + TimeZoneWeeklySelect.value
    if (WeeklyDay.value != '' && WeeklyTime.value != '' && TimeZoneWeeklySelect.value !== '') {
      FrequencyList.value.push(str)
    }
    savesubscribeobj.frequency_type = 'Weekly'
    if (WeeklyDay.value == 'Monday') {
      savesubscribeobj.weekly_week = 1
    } else if (WeeklyDay.value == 'Tuesday') {
      savesubscribeobj.weekly_week = 2
    } else if (WeeklyDay.value == 'Wednesday') {
      savesubscribeobj.weekly_week = 3
    } else if (WeeklyDay.value == 'Thursday') {
      savesubscribeobj.weekly_week = 4
    } else if (WeeklyDay.value == 'Friday') {
      savesubscribeobj.weekly_week = 5
    } else if (WeeklyDay.value == 'Saturday') {
      savesubscribeobj.weekly_week = 6
    } else if (WeeklyDay.value == 'Sunday') {
      savesubscribeobj.weekly_week = 0
    }
    savesubscribeobj.weekly_time = WeeklyTime.value
    savesubscribeobj.weekly_time_zone = TimeZoneWeeklySelect.value
    savesubscribeobj.frequency_display = str
  } else {
    isDaily.value = false
    isWeekly.value = false
    DailyTime.value = ''
    WeeklyTime.value = ''
    WeeklyDay.value = ''
    delete savesubscribeobj.frequency_type
    delete savesubscribeobj.daily_time
    delete savesubscribeobj.daily_time_zone
    delete savesubscribeobj.weekly_week
    delete savesubscribeobj.weekly_time
    delete savesubscribeobj.weekly_time_zone
  }
  emits('ChangeFrequencyAdd', FrequencyList.value, savesubscribeobj)
}
const changeTime = (val: any) => {
  if (val == 'Daily') {
    ChangeFrequency(2)
  } else {
    ChangeFrequency(3)
  }
}

// 删除 Frequency tag
const handleCloseRadioFrequency = () => {
  radio.value = 0
  ChangeFrequency(0)
}

const user_type = localStorage.getItem('user_type')

defineExpose({
  handleCloseRadioFrequency,
  FrequencyDataInit
})
</script>
<template>
  <div style="margin-top: 11px">
    <el-radio-group v-model="radio" @change="ChangeFrequency">
      <!-- <el-radio :value="1" v-if="user_type != null && user_type != 'customer'"
        >Instant notification for each update</el-radio
      > -->
      <el-radio :value="2">
        <div>Daily Summary</div>
        <div class="Daily" v-if="isDaily">
          <div class="Daily_left" style="margin-right: 8px">
            Select Time
            <div>
              <el-time-select
                v-model="DailyTime"
                start="00:00"
                step="00:30"
                end="23:30"
                prefix-icon=""
                @change="changeTime('Daily')"
                placeholder="Select Time"
              ></el-time-select>
            </div>
          </div>
          <div class="Daily_left">
            Select Time Zone
            <div>
              <el-select
                v-model="TimeZoneDailySelect"
                placeholder="Select Time Zone"
                @change="changeTime('Daily')"
              >
                <el-option
                  v-for="item in TimeZone"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </div>
      </el-radio>
      <el-radio :value="3">
        <div>Weekly Summary</div>
        <div class="Daily" v-if="isWeekly">
          <div class="Weekly_left">
            Select Day
            <div>
              <el-select
                v-model="WeeklyDay"
                @change="changeTime('Weekly')"
                placeholder="Select Day"
              >
                <el-option
                  v-for="item in WeekDay"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
          <div class="Weekly_left" style="margin: 0 8px">
            Select Time
            <div>
              <el-time-select
                v-model="WeeklyTime"
                @change="changeTime('Weekly')"
                start="00:00"
                step="00:30"
                end="23:30"
                prefix-icon=""
                placeholder="Select time"
              ></el-time-select>
            </div>
          </div>
          <div class="Weekly_left">
            Select Time Zone
            <div>
              <el-select
                v-model="TimeZoneWeeklySelect"
                placeholder="Select Time Zone"
                @change="changeTime('Weekly')"
              >
                <el-option
                  v-for="item in TimeZone"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div>
        </div>
      </el-radio>
    </el-radio-group>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-radio-group) {
  display: block;
}
:deep(.el-radio) {
  display: flex;
  min-height: 32px;
  border: 1px solid var(--color-system-border);
  background-color: var(--color-system-body-bg);
  margin-bottom: 4px;
  border-radius: 6px;
  padding: 0 8px;
  margin-right: 0;
  height: fit-content;
  line-height: 32px;
  align-items: start;
}
:deep( .el-radio__inner) {
  border: 1px solid var(--color-system-checkbox-border);
}
:deep(.el-radio__input.is-checked + .el-radio__label) {
  color: var(--color-neutral-1);
}
.Daily {
  margin: 0 0 9px 0;
  display: flex;
}
.Daily_left {
  color: var(--color-neutral-2);
  width: 50%;
}
.Weekly_left {
  color: var(--color-neutral-2);
  width: 33%;
}
:deep(.el-select__icon.el-icon svg) {
  width: 1em !important;
}
:deep(.el-select__wrapper.is-filterable) {
  padding-left: 7px;
}
:deep(.el-radio__inner) {
  margin-top: 7px;
}
</style>