<script lang="tsx">
import { defineComponent, type PropType } from 'vue'
import { DefaultButton } from '../../../lib'

type SizeProp = 'M' | 'S' | undefined;

/**
 * Компонент, отображающийся при отсутствии данных в таблице.
 * <ul>
 * <li><a href="https://www.figma.com/file/Q4Z4CnFx4i0qhD5fbgnPpf/%F0%9F%92%BB-%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0-ARK-SPACE?type=design&node-id=13153%3A150931&mode=dev" target="_blank">Дизайн</a></li>
 * </ul>
 */

export default defineComponent({
  props: {
    /**
     * Функция, срабатывающая по клику на кнопку.
     * Если данная функция отсутствует - кнопка отображаться не будет.
     */
    buttonClick: {
      type: Function as () => any,
    },

    /**
     * Текст на кнопке.
     */
    buttonLabel: {
      type: String,
    },

    /**
     * Изображение. По умолчанию 'box' - картотечный ящик.
     * Можно установить 'search' - лупа с документами.
     */
    icon: {
      type: String as PropType<'box' | 'search'>,
      default: 'box',
    },

    /**
     * Размер кнопки: 'S' или 'M'.
     * Если не указать, то по умолчанию 'M'.
     */
    size: {
      type: String as PropType<SizeProp>,
    },

    /**
     * Текст-описание, расположенный под картинкой (и над кнопкой, если она имеется).
     */
    text: {
      type: String,
    },

    /**
     * Название таблицы. Отображается в левом вернем углу.
     */
    title: {
      type: String,
    },
  },

  setup(props) {
    return () => (
      <div class="ark-ui-no-data">
        { props.title
            && <p class="ark-ui-no-data-title">{ props.title }</p>
        }
        <div class={`ark-ui-no-data-image ${props.icon}`}/>
        { props.text
            && <div class="ark-ui-no-data-text">{ props.text }</div>
        }
        { props.buttonClick
            && <span class="ark-ui-no-data-button">
              <DefaultButton
                label={props.buttonLabel}
                size={props.size}
                onClick={() => props.buttonClick()}
              />
            </span>
        }
      </div>
    )
  },
})
</script>

<style lang="scss" scoped>
.ark-ui-no-data {
  position: sticky;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  height: 100%;
  width: 100%;
  min-height: 250px;
  min-width: 500px;
  border-radius: 8px;

  &-title {
    position: absolute;
    top: 24px;
    left: 24px;
    color: #27282E;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    margin: 0;
  }

  &-button {
    margin-top: 16px;
  }

  &:has(.without-button) {
    position: sticky;
    scroll-snap-type: x;
    left: 0;
  }

  .ark-ui-no-data-image {
    height: 100px;
    width: 100px;
  }

  .box {
    background: url(./assets/no-data-box.svg) center center no-repeat;
  }

  .search {
    background: url(./assets/no-data-search.svg) center center no-repeat;
  }

  .ark-ui-no-data-text {
    color: #585B69;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    margin-top: 4px;
  }

  .ark-ui-button {
    margin-top: 16px;
  }
}
</style>
