<!--
  @component Renders a modal with details about a message.
-->
<script lang="ts">
  import Text from '~/app/ui/components/atoms/text/Text.svelte';
  import type {CopyExistingPollProps} from '~/app/ui/components/partials/modals/create-poll-modal/internal/copy-existing-poll/props';
  import {i18n} from '~/app/ui/i18n';
  import IconButton from '~/app/ui/svelte-components/blocks/Button/IconButton.svelte';
  import MdIcon from '~/app/ui/svelte-components/blocks/Icon/MdIcon.svelte';
  import {formatLocalizedDate} from '~/app/ui/utils/timestamp';

  const {onclickexistingpoll, pollItemList}: CopyExistingPollProps = $props();
</script>

{#each pollItemList as item (item.id)}
  <button class="item" onclick={() => onclickexistingpoll(item)}>
    <div class="top">
      <div class="left">
        <Text text={item.description} alignment="start"></Text>
      </div>
      <div class="right">
        <Text
          text={formatLocalizedDate(item.createdAt, $i18n)}
          alignment="end"
          color="mono-low"
          size="body-small"
        ></Text>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <Text
          text={$i18n.t('dialog--copy-poll.prose--created-by', 'Created by {creator}', {
            creator:
              item.creator.type === 'self'
                ? $i18n.t('contacts.label--own-name', 'Me')
                : item.creator.name,
          })}
          alignment="start"
          color="mono-low"
        ></Text>
      </div>
      <div class="right">
        <IconButton flavor="naked" onclick={() => onclickexistingpoll(item)}>
          <MdIcon theme="Outlined">copy</MdIcon>
        </IconButton>
      </div>
    </div>
  </button>
{/each}

<style lang="scss">
  @use 'component' as *;

  .item {
    @extend %neutral-input;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;
    gap: rem(4px);
    padding: rem(10px) rem(16px);
    width: 100%;

    &:hover {
      cursor: pointer;
      background-color: var(--cc-conversation-preview-background-color--hover);
    }

    .top,
    .bottom {
      gap: rem(8px);
    }

    .top {
      display: flex;
      align-items: center;
      justify-content: stretch;

      .left {
        flex: 1 1 auto;

        display: flex;
        justify-content: start;
      }

      .right {
        flex: 0 0 auto;
      }
    }

    .bottom {
      display: flex;
      align-items: center;
      justify-content: stretch;

      .left {
        flex: 1 1 auto;

        display: flex;
        justify-content: start;
      }

      .right {
        flex: 0 0 auto;

        font-size: rem(10px);
        line-height: rem(10px);
      }
    }
  }
</style>
