<script lang="ts">
  import { i18n } from "../i18n";
  import { selected } from "./EntitySelect.svelte";
  import EntryView from "./EntryView.svelte";
  import MultiGroupEditor from "./MultiGroupEditor.svelte";
  import Icon from "./utils/Icon.svelte";
  import EntityList from "./widgets/EntityList.svelte";

  const selectedWidgets = [
    {
      name: "List",
      icon: "list-check",
      components: ({ entities }) => [
        {
          component: EntityList,
          props: {
            entities,
            thumbnails: false,
            select: "remove",
          },
        },
      ],
    },
    {
      name: "EntityList",
      icon: "image",
      components: ({ entities }) => [
        {
          component: EntityList,
          props: {
            entities,
            thumbnails: true,
            select: "remove",
          },
        },
      ],
    },
  ];
</script>

<div class="view">
  <h2><Icon plain name="select-multiple" /> {$i18n.t("Selected")}: {$selected.length}</h2>
  <div class="actions">
    <MultiGroupEditor entities={$selected} />
  </div>
  <div class="entities">
    <EntryView
      title={$i18n.t("Selected entities")}
      entities={$selected}
      widgets={selectedWidgets}
    />
  </div>
</div>

<style lang="scss">
  .view {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  h2 {
    text-align: center;
    margin: 0;
  }

  .entities {
    flex-grow: 1;
    overflow-y: auto;
    height: 0;
  }
</style>
