<script lang="ts">
  import UserAvatar from '$lib/components/shared-components/UserAvatar.svelte';
  import { authManager } from '$lib/managers/auth-manager.svelte';
  import { handleError } from '$lib/utils/handle-error';
  import { deleteProfileImage, updateMyUser, UserAvatarColor } from '@immich/sdk';
  import { Modal, ModalBody, toastManager } from '@immich/ui';
  import { t } from 'svelte-i18n';

  interface Props {
    onClose: () => void;
  }

  let { onClose }: Props = $props();

  const colors: UserAvatarColor[] = Object.values(UserAvatarColor);

  const onSave = async (color: UserAvatarColor) => {
    try {
      if (authManager.user.profileImagePath !== '') {
        await deleteProfileImage();
      }

      toastManager.primary($t('saved_profile'));

      const response = await updateMyUser({ userUpdateMeDto: { avatarColor: color } });
      authManager.setUser(response);
      onClose();
    } catch (error) {
      handleError(error, $t('errors.unable_to_save_profile'));
    }
  };
</script>

<Modal title={$t('select_avatar_color')} size="small" {onClose}>
  <ModalBody>
    <div class="grid grid-cols-2 place-items-center gap-4 sm:grid-cols-5">
      {#each colors as color (color)}
        <button type="button" onclick={() => onSave(color)}>
          <UserAvatar
            label={color}
            user={{ ...authManager.user, profileImagePath: '', avatarColor: color }}
            size="xl"
          />
        </button>
      {/each}
    </div>
  </ModalBody>
</Modal>
