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

import type { VAvatarProps } from '/@src/components/base/VAvatar.vue'

export interface UserData extends VAvatarProps {
  id: number
  username: string
  position: string
  picture: string
  badge: string
  location: string
  industry: string
  status: string
  contacts: VAvatarProps[]
}

const page = ref(42)
const filters = ref('')

const users = userList as UserData[]
const filteredData = computed(() => {
  if (!filters.value) {
    return users
  }
  else {
    const filterRe = new RegExp(filters.value, 'i')
    return users.filter((item) => {
      return (
        item.username.match(filterRe)
        || item.position.match(filterRe)
        || item.industry.match(filterRe)
        || item.status.match(filterRe)
        || item.location.match(filterRe)
      )
    })
  }
})
</script>

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

      <VButtons>
        <VButton
          color="primary"
          icon="fas fa-plus"
          elevated
        >
          Add User
        </VButton>
      </VButtons>
    </div>
    <div class="datatable-wrapper">
      <div class="table-container">
        <table class="table datatable-table is-fullwidth">
          <thead>
            <th>Id</th>
            <th>Name</th>
            <th>Location</th>
            <th>Industry</th>
            <th>Contacts</th>
            <th>Actions</th>
          </thead>
          <tbody>
            <tr
              v-for="user in filteredData"
              :key="user.id"
            >
              <td>{{ user.id }}</td>
              <td>
                <div class="flex-media">
                  <VAvatar
                    :picture="user.picture"
                    alt="Avatar"
                  />
                  <div class="meta">
                    <h3>{{ user.username }}</h3>
                    <span>{{ user.position }}</span>
                  </div>
                </div>
              </td>
              <td>{{ user.location }}</td>
              <td>{{ user.industry }}</td>
              <td>
                <div>
                  <VAvatarStack
                    :avatars="user.contacts"
                    size="small"
                    :limit="3"
                  />
                </div>
              </td>
              <td>
                <FlexTableDropdown />
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <VPlaceholderPage
        v-if="filteredData.length === 0"
        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-7.svg"
            alt=""
          >
          <img
            class="dark-image"
            src="/images/illustrations/placeholders/search-7-dark.svg"
            alt=""
          >
        </template>
      </VPlaceholderPage>
    </div>

    <!--Table Pagination-->
    <VFlexPagination
      v-if="filteredData.length > 5"
      v-model:current-page="page"
      :item-per-page="10"
      :total-items="873"
      :max-links-displayed="7"
      no-router
      class="mt-4"
    />
  </div>
</template>

<style lang="scss" scoped>
.is-navbar {
  .datatable-toolbar {
    padding-top: 30px;
  }
}

.datatable-toolbar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  &.is-reversed {
    flex-direction: row-reverse;
  }

  .field {
    margin-bottom: 0;

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

        &:hover,
        &:focus {
          background: var(--primary);
          border-color: var(--primary);
          color: var(--primary--color-invert);
        }
      }
    }
  }

  .buttons {
    margin-left: auto;
    margin-bottom: 0;

    .v-button {
      margin-bottom: 0;
    }
  }
}

.is-dark {
  .datatable-toolbar {
    .field {
      .control {
        .button {
          background: var(--dark-sidebar) !important;
          color: var(--light-text);

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

.datatable-wrapper {
  width: 100%;

  .datatable-container {
    background: var(--white);
    border: none !important;
    overflow-x: auto;

    .table,
    table {
      width: 100%;
    }

    &::-webkit-scrollbar {
      height: 8px !important;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px !important;
      background: rgb(0 0 0 / 20%) !important;
    }
  }
}

.datatable-table {
  border: 1px solid var(--fade-grey);
  border-collapse: collapse;
  border-radius: 0.75rem;

  th {
    padding: 16px 20px;
    font-family: var(--font-alt);
    font-size: 0.8rem;
    color: var(--dark-text);
    text-transform: uppercase;
    border: 1px solid var(--fade-grey);
    font-weight: 600;

    &:last-child {
      text-align: right;
    }
  }

  td {
    font-family: var(--font);
    vertical-align: middle;
    padding: 12px 20px;
    border-bottom: 1px solid var(--fade-grey);

    &:last-child {
      text-align: right;
    }

    &.datatables-empty {
      opacity: 0;
    }
  }

  .light-text {
    color: var(--light-text);
  }

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

    .meta {
      margin-left: 10px;
      line-height: 1.3;

      span {
        display: block;
        font-size: 0.8rem;
        color: var(--light-text);
        font-family: var(--font);

        &:first-child {
          font-family: var(--font-alt);
          color: var(--dark-text);
        }
      }
    }
  }

  .row-action {
    display: flex;
    justify-content: flex-end;
  }

  .checkbox {
    padding: 0;
  }

  .product-photo {
    width: 80px;
    height: 80px;
    object-fit: contain;
  }

  .file-icon {
    width: 46px;
    height: 46px;
    object-fit: contain;
  }

  .drinks-icon {
    display: block;
    max-width: 48px;
    border-radius: var(--radius-rounded);
    border: 1px solid var(--fade-grey);
  }

  .negative-icon,
  .positive-icon {
    .iconify {
      height: 16px;
      width: 16px;
    }
  }

  .positive-icon {
    .iconify {
      color: var(--success);

      * {
        stroke-width: 4px;
      }
    }
  }

  .negative-icon {
    &.is-danger {
      .iconify {
        color: var(--danger) !important;
      }
    }

    .iconify {
      color: var(--light-text);

      * {
        stroke-width: 4px;
      }
    }
  }

  .price {
    color: var(--dark-text);
    font-weight: 500;

    &::before {
      content: '$';
    }

    &.price-free {
      color: var(--light-text);
    }
  }

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

    &.is-available {
      .iconify {
        color: var(--success);
      }
    }

    &.is-busy {
      .iconify {
        color: var(--danger);
      }
    }

    &.is-offline {
      .iconify {
        color: var(--light-text);
      }
    }

    .iconify {
      margin-right: 8px;
      font-size: 8px;
    }

    span {
      font-family: var(--font);
      font-size: 0.9rem;
      color: var(--light-text);
    }
  }
}

.is-dark {
  .datatable-wrapper {
    .datatable-container {
      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
      background: color-mix(in oklab, var(--dark-sidebar), white 6%);
    }
  }

  .datatable-table {
    border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);

    th,
    td {
      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
      color: var(--dark-dark-text);
    }

    .drinks-icon {
      border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
    }
  }
}
</style>
