<!--
// Copyright © 2023 Anticrm Platform Contributors.
// 
// Licensed under the Eclipse Public License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License. You may
// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
// 
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// 
// See the License for the specific language governing permissions and
// limitations under the License.
-->
<script lang="ts">
  import contact from '@hcengineering/contact'
  import ExpandRightDouble from '@hcengineering/contact-resources/src/components/icons/ExpandRightDouble.svelte'
  import { FindOptions, SortingOrder } from '@hcengineering/core'
  import { OK, Severity, Status } from '@hcengineering/platform'
  import presentation, { Card, createQuery, getClient, SpaceSelect } from '@hcengineering/presentation'
  import type { Applicant, Vacancy } from '@hcengineering/recruit'
  import task, { State } from '@hcengineering/task'
  import ui, {
    Button,
    ColorPopup,
    createFocusManager,
    deviceOptionsStore as deviceInfo,
    FocusHandler,
    getPlatformColor,
    Label,
    ListView,
    showPopup,
    Status as StatusControl
  } from '@hcengineering/ui'
  import { moveToSpace } from '@hcengineering/view-resources/src/utils'
  import { createEventDispatcher } from 'svelte'
  import recruit from '../plugin'
  import ApplicationPresenter from './ApplicationPresenter.svelte'
  import VacancyCard from './VacancyCard.svelte'
  import VacancyOrgPresenter from './VacancyOrgPresenter.svelte'

  export let selected: Applicant[]

  const status: Status = OK

  let _space = selected[0]?.space

  const dispatch = createEventDispatcher()
  const client = getClient()

  export function canClose (): boolean {
    return true
  }
  let loading = false

  async function updateApplication () {
    loading = true
    if (selectedState === undefined) {
      throw new Error(`Please select initial state:${_space}`)
    }
    const state = await client.findOne(task.class.State, { space: _space, _id: selectedState?._id })
    if (state === undefined) {
      throw new Error(`create application: state not found space:${_space}`)
    }

    const op = client.apply('application.states')

    for (const a of selected) {
      await moveToSpace(op, a, _space, { state: state._id, doneState: null })
    }
    await op.commit()
    loading = false
    dispatch('close')
  }

  let states: Array<{ id: number | string; color: number; label: string }> = []
  let selectedState: State | undefined
  let rawStates: State[] = []
  const statesQuery = createQuery()
  const spaceQuery = createQuery()

  let vacancy: Vacancy | undefined

  $: if (_space) {
    statesQuery.query(
      task.class.State,
      { space: _space },
      (res) => {
        rawStates = res
      },
      { sort: { rank: SortingOrder.Ascending } }
    )
    spaceQuery.query(recruit.class.Vacancy, { _id: _space }, (res) => {
      vacancy = res.shift()
    })
  }

  $: if (rawStates.findIndex((it) => it._id === selectedState?._id) === -1) {
    selectedState = rawStates[0]
  }

  $: states = rawStates.map((s) => {
    return { id: s._id, label: s.title, color: s.color }
  })

  const manager = createFocusManager()

  const orgOptions: FindOptions<Vacancy> = {
    lookup: {
      company: contact.class.Organization
    }
  }

  let verticalContent: boolean = false
  $: verticalContent = $deviceInfo.isMobile && $deviceInfo.isPortrait
  let btn: HTMLButtonElement
</script>

<FocusHandler {manager} />

<Card
  label={recruit.string.MoveApplication}
  okAction={updateApplication}
  okLabel={presentation.string.Save}
  canSave={status.severity === Severity.OK}
  on:close={() => {
    dispatch('close')
  }}
>
  <svelte:fragment slot="title">
    <div class="flex-row-center gap-2">
      <Label label={recruit.string.MoveApplication} />
    </div>
  </svelte:fragment>
  <StatusControl slot="error" {status} />
  <div class:candidate-vacancy={!verticalContent} class:flex-col={verticalContent}>
    <div class="flex flex-stretch vacancyList">
      <ListView count={selected.length}>
        <svelte:fragment slot="item" let:item>
          <ApplicationPresenter value={selected[item]} />
        </svelte:fragment>
      </ListView>
    </div>

    <div class="flex-center" class:rotate={verticalContent}>
      <ExpandRightDouble />
    </div>
    <div class="flex-grow">
      <SpaceSelect
        _class={recruit.class.Vacancy}
        spaceQuery={{ archived: false }}
        spaceOptions={orgOptions}
        label={recruit.string.Vacancy}
        create={{
          component: recruit.component.CreateVacancy,
          label: recruit.string.CreateVacancy
        }}
        bind:value={_space}
        on:change={(evt) => {
          _space = evt.detail
        }}
        component={VacancyOrgPresenter}
        componentProps={{ inline: true }}
      >
        <svelte:fragment slot="content">
          <VacancyCard {vacancy} disabled={true} />
        </svelte:fragment>
      </SpaceSelect>
    </div>
  </div>

  <svelte:fragment slot="pool">
    {#if states.length > 0}
      <Button
        focusIndex={3}
        width="min-content"
        size="small"
        kind="no-border"
        bind:input={btn}
        on:click={() => {
          showPopup(
            ColorPopup,
            { value: states, searchable: true, placeholder: ui.string.SearchDots },
            btn,
            (result) => {
              if (result && result.id) {
                selectedState = { ...result, _id: result.id, title: result.label }
              }
              manager.setFocusPos(3)
            }
          )
        }}
      >
        <div slot="content" class="flex-row-center" class:empty={!selectedState}>
          {#if selectedState}
            <div class="color" style="background-color: {getPlatformColor(selectedState.color)}" />
            <span class="label overflow-label">{selectedState.title}</span>
          {:else}
            <div class="color" />
            <span class="label overflow-label"><Label label={presentation.string.NotSelected} /></span>
          {/if}
        </div>
      </Button>
    {/if}
  </svelte:fragment>
</Card>

<style lang="scss">
  .candidate-vacancy {
    display: grid;
    grid-template-columns: 3fr 1fr 3fr;
    grid-template-rows: 1fr;
  }
  .rotate {
    transform: rotate(90deg);
  }
  .color {
    margin-right: 0.375rem;
    width: 0.875rem;
    height: 0.875rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
  }
  .label {
    flex-grow: 1;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .empty {
    .color {
      border-color: var(--content-color);
    }
    .label {
      color: var(--content-color);
    }
    &:hover .color {
      border-color: var(--accent-color);
    }
    &:hover .label {
      color: var(--accent-color);
    }
  }

  .vacancyList {
    padding: 1rem 1.5rem 1.25rem;
    background-color: var(--board-card-bg-color);
    border: 1px solid var(--divider-color);
    border-radius: 0.5rem;
    transition-property: box-shadow, background-color, border-color;
    transition-timing-function: var(--timing-shadow);
    transition-duration: 0.15s;
    user-select: text;
    min-width: 15rem;
    min-height: 15rem;

    &:hover {
      background-color: var(--board-card-bg-hover);
      border-color: var(--button-border-color);
      box-shadow: var(--accent-shadow);
    }
  }
</style>
