<template>
  <q-dialog
    v-model="opened"
    position="right"
    :persistent="propIsSet(persistent)"
    maximized
    @hide="onHide"
  >
    <q-card
      :style="{ width }"
      :class="[
        'operation-diolog no-right-border-radius',
        {
          'operation-diolog--sign':
            formIn('start') &&
            $scopedSlots.default &&
            $scopedSlots['sign-form'],
          'operation-diolog--result': formIn('result'),
          'operation-diolog--process': formIn('process'),
        },
      ]"
    >
      <div class="operation-diolog__header">
        <slot name="title">
          <span class="operation-diolog__title">
            {{ title }}
            <span v-if="sub" class="operation-diolog__title-sub">
              {{ sub }}
            </span>
          </span>
        </slot>
        <q-btn
          v-if="showCloseBtn"
          flat
          round
          class="operation-diolog__close"
          icon="pgs-close"
          size="sm"
          text-color="#1491CF"
          v-close-popup
        />
      </div>
      <q-separator />
      <div class="operation-diolog__content row">
        <div
          v-if="!!$scopedSlots.default"
          class="operation-diolog__client-form"
        >
          <slot />
        </div>
        <div
          v-if="!!$scopedSlots['sign-form']"
          class="operation-diolog__sign-form"
        >
          <slot name="sign-form" />
        </div>
        <div v-if="formIn('process')" class="operation-diolog__process">
          <slot name="process" />
        </div>
        <div v-if="formIn('result')" class="operation-diolog__result">
          <slot name="result" />
        </div>
      </div>
      <div class="operation-diolog__button-panel row q-gutter-x-sm">
        <div class="operation-diolog__button-panel-left">
          <slot name="left-actions-panel">
            <r-btn
              v-if="formIn('start')"
              outline
              label="Отмена"
              icon="pgs-close"
              color="primary"
              v-close-popup
            />
            <slot v-if="formIn('start')" name="left-actions" />
            <slot v-if="formIn('process')" name="left-actions-process" />
            <slot v-if="formIn('result')" name="left-actions-result" />
          </slot>
        </div>
        <div class="operation-diolog__button-panel-right">
          <slot name="right-actions-panel">
            <slot v-if="formIn('start')" name="right-actions" />
            <!-- <r-btn
              v-if="propIsSet(sign) && formIn('start')"
              action
              :label="signBtnLabel"
              icon="pgs-sign"
              :disable="propIsSet(disable) || !isCrertificateActive()"
              @click="sendDataForSign(formModel)"
            />
            <r-btn
              v-if="!propIsSet(sign) && formIn('start')"
              action
              :label="submitBtnLabel"
              :icon="submitBtnIcon"
              :disable="propIsSet(disable)"
              @click="action(formModel)"
            /> -->
            <slot v-if="formIn('process')" name="right-actions-process" />
            <slot v-if="formIn('result')" name="right-actions-result" />
          </slot>
        </div>
      </div>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped>
.operation-diolog {
  flex: 1 1 auto;
  display: flex;
  flex-flow: column nowrap;
  width: 600px;

  &--sign {
    width: 1225px;
  }

  &--sign &__client-form {
    @media (min-width: 600px) {
      height: auto;
      width: 50%;
    }
    @media (min-width: 1024px) {
      height: auto;
      width: 58.3333%;
    }
  }

  &--sign &__sign-form {
    @media (min-width: 600px) {
      height: auto;
      width: 50%;
    }
    @media (min-width: 1024px) {
      height: auto;
      width: 41.6667%;
    }
  }

  &--process {
    width: 600px;
    .operation-diolog__sign-form,
    .operation-diolog__client-form {
      display: none;
    }
    .operation-diolog__process {
      display: flex;
    }
  }

  &--result {
    width: 600px;

    .operation-diolog__sign-form,
    .operation-diolog__client-form {
      display: none;
    }
    .operation-diolog__result {
      display: flex;
    }
  }

  &__content {
    flex: 1 1 auto;
    display: flex;
    padding: 0 0 0 0;
  }

  &__header {
    flex: 0 0 auto;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    padding: 16px 16px 8px 16px;
    gap: 16px;
  }

  &__close {
    flex: 0 0 auto;
    color: #1491cf;
    align-self: flex-start;
  }

  &__title {
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.015em;

    color: rgba(2, 12, 18, 0.9);

    &-sub {
      display: block;
      color: #6c7276;
    }
  }

  &__separator {
    flex: 1 1 auto;
    border: none;
    border-bottom: 1px solid rgba(1, 72, 116, 0.11);
    margin-left: 15px;
    margin-right: 15px;
  }

  &__client-form {
    display: flex;
    flex-flow: column;
    padding: 16px;

    height: auto;
    width: 100%;
  }

  &__sign-form {
    display: flex;
    flex-flow: column;
    padding-top: 16px;

    height: auto;
    width: 100%;
  }

  &__result,
  &__process {
    display: none;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    flex-flow: column;
  }

  &__button-panel {
    background: rgba(15, 32, 160, 0.08);
    padding: 8px;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 8px;

    &:empty {
      display: none;
    }
  }
  &__button-panel-left,
  &__button-panel-right {
    display: flex;
    flex-flow: row wrap;
    gap: 8px;
  }
}
.no-right-border-radius {
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
</style>

<script lang="ts">
import {
  Component,
  Mixins,
  Prop,
  PropSync,
  ModelSync,
  Watch,
  Ref,
} from 'vue-property-decorator';
import CryptoProSignForm from '@/components/common/cryptopro-sign-form/index.vue';
import { isEmpty, isString } from 'lodash';
import ProcessStarter from '@/mixins/ProcessStarter';

type FormModel = Record<string | symbol, unknown>;
type FormState = 'start' | 'process' | 'result';

@Component({
  components: {
    CryptoProSignForm,
  },
})
export default class OperationDialog extends Mixins(ProcessStarter) {
  @Prop() title: string;
  @Prop() sub: string;
  @Prop({ default: () => '' }) width: string;
  @Prop() sign: boolean | string;
  @Prop() disable: boolean | string;
  @Prop() persistent: boolean | string;
  @Prop({ default: () => 'Подписать' }) signBtnLabel: string;
  @Prop({ default: () => 'Отправить' }) submitBtnLabel: string;
  @Prop({ default: () => ['start', 'result'] }) showCloseOn: FormState[];
  @Prop() submitBtnIcon: string | undefined;
  @PropSync('model') formModel: FormModel;
  @ModelSync('value', 'change') opened: boolean;
  @Prop({ default: null }) mockProcess: {
    <T>(base64: string, formModel: T): string;
  } | null;

  @Ref('signForm') signForm: CryptoProSignForm;

  formState: FormState = 'start';

  certificateIsActive = false;

  formIn(state: FormState): boolean {
    return this.formState === state;
  }

  get showCloseBtn(): boolean {
    return this.showCloseOn.every((state) => this.formIn(state));
  }

  propIsSet(prop: boolean | string): boolean {
    if (isString(prop)) return prop === '';
    return prop;
  }

  @Watch('value')
  init(): void {
    this.reset();
  }

  reset(): void {
    this.$emit('reset');
    this.formState = 'start';
  }

  toProcess(): void {
    this.$emit('process');
    this.formState = 'process';
  }

  toResult(): void {
    this.$emit('result');
    this.formState = 'result';
  }

  onHide(): void {
    this.reset();
    this.$emit('hide');
  }
}
</script>
