<script setup lang="ts">
import { users } from '/@src/data/layouts/card-grid-v1'

const filters = ref('')

const filteredData = computed(() => {
  if (!filters.value) {
    return users
  }
  else {
    return users.filter((item) => {
      return (
        item.name.match(new RegExp(filters.value, 'i'))
        || item.role.match(new RegExp(filters.value, 'i'))
        || item.medias.badge.match(new RegExp(filters.value, 'i'))
      )
    })
  }
})

const valueSingle = ref(0)
const optionsSingle = [
  'All',
  'UI/UX Design',
  'Web Development',
  'Software Eng.',
  'Business',
]
</script>

<template>
  <div>
    <div class="card-grid-toolbar">
      <VControl icon="lucide:search">
        <input
          v-model="filters"
          class="input custom-text-filter"
          placeholder="Search..."
        >
      </VControl>

      <div class="buttons">
        <VField class="h-hidden-mobile">
          <VControl>
            <Multiselect
              v-model="valueSingle"
              :options="optionsSingle"
              :max-height="145"
              placeholder="Select an option"
            />
          </VControl>
        </VField>
        <VButton
          color="primary"
          raised
        >
          <span class="icon">
            <i
              aria-hidden="true"
              class="fas fa-plus"
            />
          </span>
          <span>Add User</span>
        </VButton>
      </div>
    </div>

    <div class="card-grid card-grid-v1">
      <!--List Empty Search Placeholder -->
      <VPlaceholderPage
        :class="[filteredData.length !== 0 && 'is-hidden']"
        title="We couldn't find any matching results."
        subtitle="Too bad. Looks like we couldn't find any matching results for the
          search terms you've entered. Please try different search terms or
          criteria."
        larger
      >
        <template #image>
          <img
            class="light-image"
            src="/images/illustrations/placeholders/search-4.svg"
            alt=""
          >
          <img
            class="dark-image"
            src="/images/illustrations/placeholders/search-4-dark.svg"
            alt=""
          >
        </template>
      </VPlaceholderPage>

      <!--Card Grid v1-->
      <TransitionGroup
        name="list"
        tag="div"
        class="columns is-multiline"
      >
        <!--Grid item-->
        <div
          v-for="(item, index) in filteredData"
          :key="index"
          class="column is-6"
        >
          <div class="card-grid-item">
            <div class="card-grid-item-body">
              <div class="left">
                <VAvatar
                  size="big"
                  :picture="item.medias.avatar"
                  :badge="item.medias.badge"
                />
                <div class="meta">
                  <span class="dark-inverted">{{ item.name }}</span>
                  <span>{{ item.role }}</span>
                </div>
              </div>
              <div class="right">
                <div class="social-links">
                  <a
                    v-for="(channel, channelIndex) in item.social"
                    :key="channelIndex"
                    :href="channel.url"
                    class="social-link"
                  >
                    <i
                      aria-hidden="true"
                      :class="channel.icon"
                    />
                  </a>
                </div>
              </div>
            </div>

            <div class="card-grid-item-footer">
              <div class="left">
                <div class="progress-stats">
                  <span class="dark-inverted">Progress</span>
                  <span>{{ item.progress }}%</span>
                </div>
                <div class="progress-bar">
                  <VProgress
                    size="tiny"
                    :value="item.progress"
                  />
                </div>
              </div>
              <div class="right">
                <div class="buttons">
                  <VButton
                    dark-outlined
                    rounded
                  >
                    View Profile
                  </VButton>
                </div>
              </div>
            </div>
          </div>
        </div>
      </TransitionGroup>
    </div>
  </div>
</template>

<style lang="scss">
.card-grid {
  .columns {
    margin-inline-start: -0.5rem !important;
    margin-inline-end: -0.5rem !important;
    margin-top: -0.5rem !important;
  }

  .column {
    padding: 0.5rem !important;
  }
}

.card-grid-v1 {
  .card-grid-item {
    flex: 1;
    display: inline-block;
    width: 100%;
    background-color: var(--white);
    border-radius: 6px;
    border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
    transition: all 0.3s; // transition-all test

    .card-grid-item-body {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;
      border-bottom: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);

      .left {
        display: flex;
        align-items: center;

        .meta {
          margin-inline-start: 12px;
          line-height: 1.3;

          span {
            display: block;

            &:first-child {
              font-size: 1.1rem;
              font-weight: 600;
              font-family: var(--font-alt);
              color: var(--dark-text);
            }

            &:nth-child(2) {
              font-family: var(--font);
              font-size: 0.85rem;
              color: var(--light-text);
            }
          }
        }
      }

      .right {
        .social-links {
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 32px;
            width: 32px;
            min-width: 32px;
            border-radius: 50%;
            border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
            margin: 0 4px;
            color: var(--primary);
            box-shadow: var(--light-box-shadow);
            transition: all 0.3s; // transition-all test

            &:hover {
              color: var(--white);
              background: var(--primary);
              border-color: var(--primary);
              box-shadow: var(--primary-box-shadow);
            }

            .iconify {
              font-size: 12px;
            }
          }
        }
      }
    }

    .card-grid-item-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px;

      .left {
        flex-grow: 2;
        max-width: 50%;

        .progress-stats {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 8px;

          span {
            display: block;

            &:first-child {
              font-family: var(--font-alt);
              font-size: 0.9rem;
              font-weight: 600;
              color: var(--dark-text);
            }

            &:nth-child(2) {
              font-size: 0.9rem;
              color: var(--light-text);
            }
          }
        }

        .progress {
          margin-bottom: 0;
        }
      }

      .right {
        .v-button {
          color: var(--light-text);

          &:hover,
          &:focus {
            border-color: var(--primary);
            background: var(--primary);
            color: var(--smoke-white);
            box-shadow: var(--primary-box-shadow);
          }
        }
      }
    }
  }
}

.is-dark {
  .card-grid-v1 {
    .card-grid-item {
      background: color-mix(in oklab, var(--dark-sidebar), white 6%);
      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

      .card-grid-item-body {
        border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

        .left {
          .v-avatar {
            .badge {
              border-color: color-mix(in oklab, var(--dark-sidebar), white 6%);
            }
          }
        }

        .right {
          .social-links {
            .social-link {
              background: color-mix(in oklab, var(--dark-sidebar), white 2%);
              border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
              color: var(--dark-dark-text);

              &:hover,
              &:focus {
                border-color: var(--primary) !important;
                color: var(--primary) !important;
              }
            }
          }
        }
      }

      .card-grid-item-footer {
        .right {
          .v-button {
            box-shadow: none !important;
          }
        }
      }
    }
  }
}

@media only screen and (width <= 767px) {
  .card-grid-v1 {
    .card-grid-item {
      .card-grid-item-body {
        flex-direction: column;

        .left {
          flex-direction: column;
          text-align: center;

          .meta {
            margin: 5px 0 20px;
          }
        }
      }
    }
  }
}
</style>
