<template>
  <base-modal @close="$parent.close()">
    <template #header-title>
      <div class="column is-full" style="margin: 0.75rem">
        <div class="card-header-title columns " style="padding-bottom: 0.25rem">
          Merge modal
        </div>
        <div class="columns" style="padding-left: 0.75rem">
          Compare selected commits
        </div>
      </div>
    </template>

    <template #content>
      <div class="columns">
        <div class="column is-offset-3 is-3 table-heading">
          Unique in commit xy
        </div>
        <div class="column is-3 table-heading">
          Common in both
        </div>
        <div class="column is-3 table-heading">
          Unique in working copy
        </div>
      </div>
      <div v-for="(md, index) in mergeData" :key="index" class="columns merge-table">
        <!-- T a b l e   r o w s -->
        <div class="column is-3" @click="md.listing = !md.listing">
          <!-- R o w   c a p t i o n -->
          <div class="columns row-caption">
            {{ md.title }}
            <font-awesome-icon
              v-if="!md.listing"
              icon="chevron-down"
              size="sm"
              class="font-awesome-icon"
            />
            <font-awesome-icon
              v-if="md.listing"
              icon="chevron-up"
              size="sm"
              class="font-awesome-icon"
            />
          </div>
        </div>

        <!-- R o w   c e l l s -->
        <div class="column is-9">
          <!-- S u m m a r y   r o w -->
          <div class="columns">
            <div
              v-for="(view, i) in md.views"
              :key="i"
              class="column is-4 selectable"
              :class="{ selected: view.selected, stripe: false }"
              @click="view.selected = !view.selected"
            >
              <!-- @mouseover="onMouseover(view.items)" -->
              <div class="columns category-cell">
                <!-- <span v-if="view.selected"> +</span> -->
                {{ view.items.length }} selected / 20
              </div>
            </div>
          </div>

          <!-- L i s t   o f   c h a n g e s -->
          <div v-if="md.listing" class="columns" style="text-align:center">
            <div v-for="(view, i) in md.views" :key="i" class="column is-4 scrollable ">
              <div
                v-for="item in view.items"
                :key="item"
                class="columns selectable item-cell"
                :class="{ selected: item.selected }"
                @click="item.selected = !item.selected"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <!--  -->
        </div>
      </div>
      <!-- <div class="columns" style="float:right; margin-top: 1rem; margin-bottom: 1rem"> -->
      <div class="columns">
        <div class="column is-offset-8 is-4">
          <b-button
            size="is-small"
            type="is-dark"
            outlined
            style="margin: 0px 10px"
            @click="$emit('cancel-merge')"
          >
            Cancel
          </b-button>
          <b-button size="is-small" type="is-dark" @click="$emit('merge')">
            Merge
          </b-button>
        </div>
      </div>
    </template>
    <template #footer>
      <b-button size="is-small" type="is-dark" class="button" @click="saveModal">
        Save
      </b-button>
    </template>
  </base-modal>
</template>

<script>
import { mapMutations, mapState } from 'vuex'

export default {
  data() {
    return {
      mergeData: {
        nodes: {
          title: 'nodes',
          listing: false,
          views: {
            A: {
              value: 5,
              selected: false,
              items: [
                {
                  name: 'Harry Potter',
                  selected: false
                },
                {
                  name: 'Hermiona Granger',
                  selected: true
                },
                {
                  name: 'Ron Weasley',
                  selected: true
                },
                {
                  name: 'Albus Dumbledore',
                  selected: false
                },
                {
                  name: 'Lord Voldemort',
                  selected: true
                }
              ]
            },
            AB: {
              value: 15,
              selected: true,
              items: [
                {
                  name: 'Harry Potter',
                  selected: true
                },
                {
                  name: 'Hermiona Granger',
                  selected: true
                },
                {
                  name: 'Ron Weasley',
                  selected: true
                },
                {
                  name: 'Albus Dumbledore',
                  selected: true
                },
                {
                  name: 'Lord Voldemort',
                  selected: true
                },
                {
                  name: 'Harry Potter',
                  selected: true
                },
                {
                  name: 'Hermiona Granger',
                  selected: true
                },
                {
                  name: 'Ron Weasley',
                  selected: true
                },
                {
                  name: 'Albus Dumbledore',
                  selected: true
                },
                {
                  name: 'Lord Voldemort',
                  selected: true
                }
              ]
            },
            B: {
              value: 7,
              selected: true,
              items: [
                {
                  name: 'Ron Weasley',
                  selected: false
                },
                {
                  name: 'Albus Dumbledore',
                  selected: true
                },
                {
                  name: 'Lord Voldemort',
                  selected: false
                }
              ]
            }
          }
        },
        links: {
          title: 'links',
          listing: false,
          views: {
            A: {
              value: 15,
              selected: false,
              items: []
            },
            AB: {
              value: 15,
              selected: true,
              items: []
            },
            B: {
              value: 7,
              selected: false,
              items: []
            }
          }
        },
        groups: {
          title: 'groups',
          listing: false,
          views: {
            A: {
              value: 5,
              selected: false,
              items: []
            },
            AB: {
              value: 15,
              selected: true,
              items: []
            },
            B: {
              value: 7,
              selected: true,
              items: []
            }
          }
        },
        tags: {
          title: 'tags',
          listing: false,
          views: {
            A: {
              value: 5,
              selected: false,
              items: []
            },
            AB: {
              value: 15,
              selected: true,
              items: []
            },
            B: {
              value: 7,
              selected: true,
              items: []
            }
          }
        },
        aggregations: {
          title: 'aggregations',
          listing: false,
          views: {
            A: {
              value: 5,
              selected: false,
              items: []
            },
            AB: {
              value: 15,
              selected: true,
              items: []
            },
            B: {
              value: 7,
              selected: true,
              items: []
            }
          }
        }
      }
    }
  },
  computed: mapState('interaction', ['inDebug']),
  methods: {
    // ...mapActions('interaction', ['stopHighlighting']),
    ...mapMutations('interaction', [
      'SET_NODE_HIGHLIGHT',
      'UNSET_NODE_HIGHLIGHT',
      'SET_LINK_HIGHLIGHT'
    ]),
    // onMouseover(items) {
    // console.log(items)
    // // if (this.allowHover) this.SET_NODE_HIGHLIGHT(this.node.id)
    // for (let id in items) {
    //   this.SET_NODE_HIGHLIGHT(this.node(id))
    // }
    // },
    onMouseout() {
      // if (this.allowHover) this.UNSET_NODE_HIGHLIGHT(this.node.id)
    }
  }
}
</script>

<style lang="sass" scoped>
.merge-card
  max-width: 500px
  left: 40px


.card-content
  padding-top: 0rem

.column
  cursor: pointer
  user-select: none


.selectable
  border-style: solid
  border-color: #f3f3f3
  border-width: 1px
  // box-shadow: 2px 2px 5px 1px rgba(158 ,158,160,0.1)
  &.selected
    // background-color: none
    background-color: #f3f3f3
    &:hover
      background-color: #ddd
  &:hover
    background-color: #e3e3e3

.stripe
  background-image: repeating-linear-gradient(-45deg,#fff, #fff 10px, #f3f3f3 10px, #f3f3f3 20px)
  // background-opacity: 0.5
  // background: linear-gradient( 135deg, #fff 25%, #ddd 25%, #ddd 50%, #fff 50%, #fff 75%, #ddd 75%, #ddd 100% )
  &:hover
    background-image: repeating-linear-gradient(-45deg,#fff, #fff 10px, #ddd 10px, #ddd 20px)
    // background-opacity: 1

.scrollable
  max-height: 110px
  // height: 200px
  overflow-y: auto
  &::-webkit-scrollbar
    background-color: rgba(222, 222, 222, 0.2) // #eee
    border-radius: 5px
    width: 5px
    // opacity: 0.5
    // &:hover
    //   opacity: 1
  &::-webkit-scrollbar-thumb
    background-color: #ccc
    width: 5px
    border-radius: 5px
    opacity: 0.5
    &:hover
      opacity: 1

.table-heading
  color: #363636
  font-size: 0.8rem
  font-weight: 500

.merge-table
  color: #363636
  font-size: 0.8rem
  // font-weight: 500
  line-height: 1.5
  margin-bottom: 1.5rem !important

.row-caption
  float: right
  padding-top: 0.1rem

.category-cell
  padding-left: 0.5rem
  padding-top: 0.1rem
  font-weight: 500

.item-cell
  padding-left: 0.5rem
  color: #363636
  font-size: 0.7rem
  line-height: 1.7
  border-style: solid solid none solid
  border-color: #ddd #fff
  border-width: 0.2px

.font-awesome-icon
  margin: 0.3rem 0.5rem 0rem 0.5rem
  color: #919191
</style>
