<template>
  <div class="new-settings-wrap">
   <div class="setting-wrap title-wrap">
      <div class="header" @click="openSetting('widget_title')">
        <div class="text-section">
          <span>Widget Title</span>
        </div>
        <div class="icon-section">
          <svg class="icon">
            <use xlink:href="/assets/img/mads-common-icons.svg#arrow-down"></use>
          </svg>
        </div>
      </div>
      <div class="content" v-if="openedSetting === 'widget_title'">
        <div class="d-flex justify-content-between align-items-center w-100">
          <div>
            <b-form-input v-model="settings.title.text" type="text" placeholder="Title"></b-form-input>
          </div>
          <div>
            <svg class="icon" id="popover-formatter">
              <use xlink:href="/assets/img/mads-common-icons.svg#text-format"></use>
            </svg>
            <b-popover
              target="popover-formatter"
              placement="bottom"
              triggers="hover focus"
            >
              <text-formatter
              :defaultSettings="settings.title.text_settings"
              @formatter-updated="titleTextFormatter"
              ></text-formatter>
            </b-popover>
          </div>
        </div>
      </div>
    </div>
    <div class="setting-wrap background-position-wrap">
      <div class="header" @click="openSetting('settings')">
        <div class="text-section">
          <span>Settings</span>
        </div>
        <div class="icon-section">
          <svg class="icon">
            <use xlink:href="/assets/img/mads-common-icons.svg#arrow-down"></use>
          </svg>
        </div>
      </div>
      <div class="content" v-if="openedSetting === 'settings'">
        <svg class="text-format" @click="addLocations()">
          <use xlink:href="/assets/img/mads-common-icons.svg#location"></use>
        </svg>
        <div v-for="(location, index) in settings.locations" :key="index">
          <div class="setting-wrap">
            <div class="header" @click="openDataSettings('data_point' + index)">
              <div class="text-section">
                <span>{{index + 1}}. {{location.location_name}}</span>
              </div>
              <div class="icon-section">
                <svg class="icon">
                  <use xlink:href="/assets/img/mads-common-icons.svg#arrow-down"></use>
                </svg>
              </div>
            </div>
          </div>
          <div class="content" v-if="dataSetting === 'data_point' + index">
            <span class="icon-wrap">
              <span class="icon mr-1" @click="deleteLocation(index)">
                <b-icon icon="trash" aria-hidden="true"></b-icon>
              </span>
              <svg class="icon mr-1" @click="copyLocation(index)">
                <use xlink:href="/assets/img/mads-common-icons.svg#copy-one"></use>
              </svg>
            </span>
            <div class="row m-0">
              <div class="col-12 p-0">
                <div class="form-group">
                  <label class="form-lable">Location Name</label>
                  <google-autocomplete-vue
                    @placeChanged="placeChanged"
                    @validSearch="validSearch"
                    v-model="location.location_name"
                    :index="index"
                    :searchText="location.location_name"
                    :name="`settings.locations[${index}][location_name]`"
                  ></google-autocomplete-vue>
                </div>
              </div>
            </div>
            <div class="row m-0">
              <div class="col-6 pl-0">
                <div class="form-group">
                  <label class="form-lable">Latitude</label>
                  <input type="number" class="form-control" v-model="location.lat" :name="`settings.locations[${index}][lat]`"/>
                </div>
              </div>
              <div class="col-6 pr-0">
                <div class="form-group">
                  <label class="form-lable">Longitude</label>
                  <input type="number" class="form-control" v-model="location.lng" :name="`settings.locations[${index}][lng]`"/>
                </div>
              </div>
            </div>
            <div class="row m-0">
              <div class="col-12 p-0"><hr /></div>
              <div class="col-12 p-0">
                <div class="title-tag">Location Settings</div>
              </div>
              <div class="col-12 p-0">
                <div class="d-flex align-items-center justify-content-between">
                  <div class="secondary-tag">Location Mark Icon</div>
                  <div class="extra-edit d-flex align-items-center">
                    <span class="p-1 d-flex align-items-center">Default <input type="color" class="color-picker" value="#ff0000" v-model="location.location_settings.marker_color"/></span>
                    <div class="icon-wrapper p-1">
                      <svg class="icon">
                        <use :xlink:href="`/assets/img/mads-common-icons.svg#${location.location_settings.marker_name}`"></use>
                      </svg>
                    </div>
                    <div class="icon-wrapper p-1" id="location-popover">
                      <svg class="icon icon-box">
                        <use xlink:href="/assets/img/mads-common-icons.svg#arrow-down"></use>
                      </svg>
                      <b-popover
                        target="location-popover"
                        placement="bottom"
                        triggers="hover focus"
                      >
                        <map-icon-picker
                        :index="index"
                        @icon-picker-updated="iconPickerUpdated"
                        ></map-icon-picker>
                      </b-popover>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-12 p-0"><hr /></div>
                <div class="col-12 p-0">
                  <div
                    class="d-flex align-items-center justify-content-between">
                    <div class="title-tag">Annotation</div>
                  </div>
                </div>
                <div class="col-12 p-0">
                  <div class="d-flex align-items-center justify-content-between">
                    <div class="secondary-tag">
                      {{ location.location_name }}
                    </div>
                    <div class="icon-wrapper">
                      <div class="icon mb-1 ml-2">
                        <svg class="icon" :id="`popover-${index}`">
                          <use
                            xlink:href="/assets/img/mads-common-icons.svg#vector"
                          ></use>
                        </svg>
                      </div>
                    </div>
                    <b-popover :target="`popover-${index}`" placement="bottom" triggers="hover focus">
                      <text-formatter
                        :index="index"
                        :defaultSettings="location.text_settings"
                        @formatter-updated="locationTextFormatter"
                      ></text-formatter>
                    </b-popover>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    <div class="setting-wrap band-setting">
      <div class="header" @click="openSetting('map-setting')">
        <div class="text-section">
          <span>Map Settings</span>
        </div>
        <div class="icon-section">
          <svg class="icon">
            <use xlink:href="/assets/img/mads-common-icons.svg#arrow-down"></use>
          </svg>
        </div>
      </div>
      <div class="content" v-if="openedSetting === 'map-setting'">
        <div class="row m-0">
          <div class="col-12">
            <div class="map-option d-flex">
              <div v-for="(item, index) in mapTypes" :key="index">
                <div class="map-type" @click="mapType(item.map_type)">
                <div class="map-block" style="position: relative">
                  <img :src="`/assets/img/map/${item.img_name}`" alt="">
                  <div class="icon selected-map-type" v-if="item.map_type == selectedMapType">
                  <svg class="icon selected-map-svg">
                    <use
                      xlink:href="/assets/img/mads-common-icons.svg#check-mark"
                    ></use>
                  </svg>
                  </div>
                </div>
                <div class="map-title">{{item.map_title}}</div>
              </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import googleAutocompleteVue from './common/googleAutocomplete.vue'
import TextFormatter from './common/textFormatter.vue'
import MapIconPicker from './common/mapIconPicker.vue'
import { BIcon } from 'bootstrap-vue'
export default {
  components: { googleAutocompleteVue, TextFormatter, BIcon, MapIconPicker },
  props: {
    visualProp: {
      type: Object,
      required: true
    },
    selectedNodes: {
      type: Array,
      required: true
    },
    instanceSeriesData: {
      type: Array,
      required: true
    },
    seriesDataMapping: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      openedSetting: 'widget_title',
      dataSetting: 'data_point0',
      mapTypeId: 'roadmap',
      mapTraffic: '',
      selectedMapType: 'roadmap',
      search: '',
      settings: {
        title: {
          text: '',
          text_settings: {
            align: 'left',
            decorations: {
              isBold: false,
              isItalic: false,
              isUnderline: false
            },
            fontColor: '#495057',
            fontSize: '15px'
          }
        },
        background_and_position: {
          background: '#ffffff'
        },
        locations: [
          {
            location_name: '',
            lat: '',
            lng: '',
            location_settings: {
              marker_name: 'mapLocation',
              marker_color: '#FF0000',
              marker_icon: 'M7.54875 0C3.37969 0 0 3.4557 0 7.71852C0 9.04079 0.457886 10.5188 1.23486 12.0509C2.00617 13.5719 3.04919 15.0629 4.1165 16.3881C5.18074 17.7094 6.24848 18.8405 7.05152 19.6421C7.23208 19.8223 7.39886 19.9855 7.54875 20.13C7.69864 19.9855 7.86542 19.8223 8.04598 19.6421C8.84902 18.8405 9.91676 17.7094 10.981 16.3881C12.0483 15.0629 13.0913 13.5719 13.8626 12.0509C14.6396 10.5188 15.0975 9.04079 15.0975 7.71852C15.0975 3.4557 11.7178 0 7.54875 0ZM7.54875 5.14568C6.15906 5.14568 5.0325 6.29758 5.0325 7.71852C5.0325 9.13946 6.15906 10.2914 7.54875 10.2914C8.93844 10.2914 10.065 9.13946 10.065 7.71852C10.065 6.29758 8.93844 5.14568 7.54875 5.14568ZM2.51625 7.71852C2.51625 4.87664 4.76938 2.57284 7.54875 2.57284C10.3281 2.57284 12.5812 4.87664 12.5812 7.71852C12.5812 10.5604 10.3281 12.8642 7.54875 12.8642C4.76938 12.8642 2.51625 10.5604 2.51625 7.71852Z'
            },
            text_settings: {
              align: 'left',
              decorations: {
                isBold: false,
                isItalic: false,
                isUnderline: false
              },
              fontColor: '#495057',
              fontSize: '15px'
            }
          }
        ],
        map_setting: {
          zoom: 9,
          mapTypeId: 'roadmap',
          mapTraffic: ''
        }
      },
      mapTypes: [
        {
          map_title: 'Default',
          map_type: 'roadmap',
          img_name: 'default.png'
        },
        {
          map_title: 'Terrain',
          map_type: 'terrain',
          img_name: 'satalite.png'
        },
        {
          map_title: 'Traffic',
          map_type: 'traffic',
          img_name: 'traffic.png'
        },
        {
          map_title: 'Transit',
          map_type: 'transit',
          img_name: 'street.png'
        }
      ]
    }
  },
  methods: {
    openSetting (setting) {
      this.openedSetting = setting
    },
    openDataSettings (setting) {
      this.dataSetting = setting
    },
    placeChanged (place, index) {
      this.settings.locations[index].lat = place.geometry.location.lat()
      this.settings.locations[index].lng = place.geometry.location.lng()
    },
    addLocations () {
      this.settings.locations.push({
        location_name: '',
        lat: '',
        lng: '',
        location_settings: {
          marker_name: 'mapLocation',
          marker_color: '#FF0000',
          marker_icon: 'M7.54875 0C3.37969 0 0 3.4557 0 7.71852C0 9.04079 0.457886 10.5188 1.23486 12.0509C2.00617 13.5719 3.04919 15.0629 4.1165 16.3881C5.18074 17.7094 6.24848 18.8405 7.05152 19.6421C7.23208 19.8223 7.39886 19.9855 7.54875 20.13C7.69864 19.9855 7.86542 19.8223 8.04598 19.6421C8.84902 18.8405 9.91676 17.7094 10.981 16.3881C12.0483 15.0629 13.0913 13.5719 13.8626 12.0509C14.6396 10.5188 15.0975 9.04079 15.0975 7.71852C15.0975 3.4557 11.7178 0 7.54875 0ZM7.54875 5.14568C6.15906 5.14568 5.0325 6.29758 5.0325 7.71852C5.0325 9.13946 6.15906 10.2914 7.54875 10.2914C8.93844 10.2914 10.065 9.13946 10.065 7.71852C10.065 6.29758 8.93844 5.14568 7.54875 5.14568ZM2.51625 7.71852C2.51625 4.87664 4.76938 2.57284 7.54875 2.57284C10.3281 2.57284 12.5812 4.87664 12.5812 7.71852C12.5812 10.5604 10.3281 12.8642 7.54875 12.8642C4.76938 12.8642 2.51625 10.5604 2.51625 7.71852Z'
        },
        text_settings: {
          align: 'left',
          decorations: {
            isBold: false,
            isItalic: false,
            isUnderline: false
          },
          fontColor: '#495057',
          fontSize: '15px'
        }
      })
    },
    iconPickerUpdated (icon, index) {
      this.settings.locations[index].location_settings.marker_icon = icon.iconPath
      this.settings.locations[index].location_settings.marker_name = icon.iconName
    },
    titleTextFormatter (data) {
      Object.assign(this.settings.title.text_settings, data)
    },
    locationTextFormatter (data, index) {
      Object.assign(this.settings.locations[index].text_settings, data)
    },
    copyLocation (index) {
      if (this.settings.locations[index].location_name === '' || this.settings.locations[index].lat === '' || this.settings.locations[index].lng === '') {
        this.$toastr.error('Location details are incorrect', 'Error', { closeButton: true, closeDuration: 0 })
      } else {
        this.settings.locations.push({ ...this.settings.locations[index] })
      }
    },
    deleteLocation (index) {
      this.settings.locations.splice(index, 1)
    },
    isValidate () {
      let result
      if (this.settings.title.text === '') {
        this.$toastr.error('Enter valid widget name', 'Error', { closeButton: true, closeDuration: 0 })
        result = false
      } else {
        if (this.search) {
          this.$toastr.error('Fill all locations correctly', 'Error', { closeButton: true, closeDuration: 0 })
          result = false
        } else if (this.settings.locations.every(location => (!location.location_name || !location.lat || !location.lng) === false)) {
          result = true
        } else {
          this.$toastr.error('Fill all locations correctly', 'Error', { closeButton: true, closeDuration: 0 })
          result = false
        }
      }
      this.$emit('isValidate', result)
    },
    getSettings () {
      this.settings.locations.forEach(i => {
        i.lat = Number(i.lat)
        i.lng = Number(i.lng)
      })
      return this.settings
    },
    getSeriesData () {
      return []
    },
    mapType (type) {
      this.selectedMapType = type
      if (type === 'roadmap' || type === 'terrain') {
        this.settings.map_setting.mapTypeId = type
        this.settings.map_setting.mapTraffic = ''
        this.settings.map_setting.zoom = 9
      } else {
        this.settings.map_setting.mapTypeId = 'roadmap'
        this.settings.map_setting.mapTraffic = type
        this.settings.map_setting.zoom = 13
      }
    },
    validSearch (search) {
      this.search = search
    }
  },
  watch: {
    visualProp () {
      if (!this.$_.isEmpty(this.visualProp)) {
        this.settings = this.$_.merge({}, this.visualProp)
        if (this.visualProp.map_setting.mapTraffic) {
          this.selectedMapType = this.visualProp.map_setting.mapTraffic
        } else {
          this.selectedMapType = this.visualProp.map_setting.mapTypeId
        }
      }
    },
    settings: {
      handler () {
        // this.isValidate()
      },
      deep: true
    },
    search () {
      // this.isValidate()
    }
  }
}
</script>

<style lang="scss" scoped>
.new-settings-wrap {
  margin-right: 10px;
  .form-control {
    border: 1px solid #acb5bd;
    border-radius: 8px;
    height: 30px;
  }
  .title-tag {
    font-size: 12px;
    font-weight: 700;
  }
  .secondary-tag {
    color: #495057;
    font-size: 12px;
  }
  .form-group {
    margin-bottom: 8px !important;
  }
  .form-lable {
    color: #495057;
    font-size: 12px;
    margin-bottom: 0;
  }
  .setting-wrap {
    margin-top: 10px;
    margin-bottom: 15px;
  }
  .header {
    border-bottom: 1px solid rgba(212, 217, 219, 0.5);
    padding-bottom: 4px;
    display: flex;
    align-items: center;
    .text-section {
      width: calc(100% - 20px);
      span {
        font-weight: bold;
        font-size: 15px;
        color: #000000;
        cursor: pointer;
      }
    }
    .icon-section {
      width: 20px;
      cursor: pointer;
      .icon {
        width: 12px;
        height: 11px;
        fill: #727272;
      }
    }
  }
  .content {
    position: relative;
    color: #495057;
    padding: 10px 10px 0px 10px;
    .text-format {
      position: absolute;
      top: -28px;
      right: 30px;
      width: 20px;
      height: 30px;
      cursor: pointer;
    }
    .icon-wrap {
      position: absolute;
      top: -40px;
      right: 25px;
    }
    .icon {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .map-option {
      cursor: pointer;
      justify-content: space-evenly;
      .map-block {
        height: 60px;
        width: 60px;
        border-radius: 50%;
        display: block;
        // background-color: darkgrey;
        margin: 5px;
      }
      .map-title {
        text-align: center;
        font-size: 12px;
        font-weight: 400;
      }
      .selected-map-type {
        width: 53px;
        height: 53px;
        background-color: gray;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 50%;
        opacity: 0.5;
      }
      .selected-map-svg {
        position: absolute;
        top: 20px;
        left: 20px;
      }
    }
    .color-picker {
      height: 25px;
      width: 25px;
      padding: 0;
      margin-left: 5px;
    }
    .icon-box {
      border: 1px solid gray;
      fill: gray;
      border-radius: 4px;
      padding: 5px;
    }
  }
}
</style>
