import {
  CustomAvatarColorKey,
  DEFAULT_AVATAR_COLOR_KEY,
} from '../../components/display/utils/avatar_gradient_colors'
import type { AvatarType, AvatarUpdatePayload } from '../../hooks/use_conversation_avatar_update'
import type { ConversationResource } from '../../types'
import type { ImagePickerAsset } from '../../utils/native_adapters/image_picker'

export type { AvatarType }
export type AvatarTab = 'icon' | 'emoji' | 'upload'

export interface AvatarPickerState {
  activeTab: AvatarTab
  selectedType: AvatarType | null
  selectedKey: string | null
  selectedColor: string
  imagePreviewUri: string | null
  imageAsset: ImagePickerAsset | null
  isDirty: boolean
}

export type AvatarPickerAction =
  | { type: 'SELECT_TAB'; payload: AvatarTab }
  | { type: 'SELECT_ICON'; payload: string }
  | { type: 'SELECT_EMOJI'; payload: string }
  | { type: 'SELECT_COLOR'; payload: CustomAvatarColorKey }
  | { type: 'SET_IMAGE'; payload: ImagePickerAsset }
  | { type: 'CLEAR' }

export function avatarPickerReducer(
  state: AvatarPickerState,
  action: AvatarPickerAction
): AvatarPickerState {
  switch (action.type) {
    case 'SELECT_TAB':
      return { ...state, activeTab: action.payload }
    case 'SELECT_ICON':
      return {
        ...state,
        selectedType: 'icon',
        selectedKey: action.payload,
        isDirty: true,
      }
    case 'SELECT_EMOJI':
      return {
        ...state,
        selectedType: 'emoji',
        selectedKey: action.payload,
        isDirty: true,
      }
    case 'SELECT_COLOR':
      return {
        ...state,
        selectedColor: action.payload,
        isDirty: true,
      }
    case 'SET_IMAGE':
      return {
        ...state,
        selectedType: 'image',
        selectedKey: null,
        imagePreviewUri: action.payload.uri,
        imageAsset: action.payload,
        isDirty: true,
      }
    case 'CLEAR':
      return {
        ...state,
        selectedType: null,
        selectedKey: null,
        selectedColor: DEFAULT_AVATAR_COLOR_KEY,
        imagePreviewUri: null,
        imageAsset: null,
        isDirty: true,
      }
  }
}

export function initEmptyAvatarPickerState(): AvatarPickerState {
  return {
    activeTab: 'icon',
    selectedType: null,
    selectedKey: null,
    selectedColor: DEFAULT_AVATAR_COLOR_KEY,
    imagePreviewUri: null,
    imageAsset: null,
    isDirty: false,
  }
}

export function initAvatarPickerState(
  conversation: Pick<
    ConversationResource,
    'customAvatarType' | 'customAvatarKey' | 'customAvatarColor' | 'customAvatarImageUrl'
  >
): AvatarPickerState {
  const tabFromType: Record<AvatarType, AvatarTab> = {
    icon: 'icon',
    emoji: 'emoji',
    image: 'upload',
  }

  return {
    activeTab:
      (conversation.customAvatarType && tabFromType[conversation.customAvatarType]) ?? 'icon',
    selectedType: conversation.customAvatarType ?? null,
    selectedKey: conversation.customAvatarKey ?? null,
    selectedColor: conversation.customAvatarColor || DEFAULT_AVATAR_COLOR_KEY,
    imagePreviewUri: conversation.customAvatarImageUrl ?? null,
    imageAsset: null,
    isDirty: false,
  }
}

export function initAvatarPickerStateFromPayload(payload: AvatarUpdatePayload): AvatarPickerState {
  switch (payload.kind) {
    case 'icon':
    case 'emoji':
      return {
        activeTab: payload.kind,
        selectedType: payload.kind,
        selectedKey: payload.key,
        selectedColor: payload.color || DEFAULT_AVATAR_COLOR_KEY,
        imagePreviewUri: null,
        imageAsset: null,
        isDirty: false,
      }
    case 'image':
      return {
        activeTab: 'upload',
        selectedType: 'image',
        selectedKey: null,
        selectedColor: payload.color || DEFAULT_AVATAR_COLOR_KEY,
        imagePreviewUri: payload.imageAsset.uri,
        imageAsset: payload.imageAsset,
        isDirty: false,
      }
    default:
      return initEmptyAvatarPickerState()
  }
}