import JsonToHtml from "@/components/JsonToHtml"

import JoinLoyaltyContact from "./JoinLoyalty"
import { MyPagesNavigation } from "./MyPagesNavigation"

import styles from "./sidebar.module.css"

import {
  SidebarDynamicComponentEnum,
  SidebarTypenameEnum,
} from "@/types/components/content/enums"
import type { SidebarProps } from "@/types/components/content/sidebar"

export default function SidebarLoyalty({ blocks }: SidebarProps) {
  return (
    <aside className={styles.aside}>
      {blocks.map((block, idx) => {
        switch (block.__typename) {
          case SidebarTypenameEnum.ContentPageSidebarContent:
            return (
              <section
                className={styles.content}
                key={`${block.__typename}-${idx}`}
              >
                <JsonToHtml
                  embeds={block.content.content.embedded_itemsConnection.edges}
                  nodes={block.content.content.json.children}
                />
              </section>
            )
          case SidebarTypenameEnum.ContentPageSidebarJoinLoyaltyContact:
            return (
              <JoinLoyaltyContact
                block={block.join_loyalty_contact}
                key={`${block.__typename}-${idx}`}
              />
            )
          case SidebarTypenameEnum.ContentPageSidebarDynamicContent:
            switch (block.dynamic_content.component) {
              case SidebarDynamicComponentEnum.my_pages_navigation:
                return <MyPagesNavigation key={`${block.__typename}-${idx}`} />
              default:
                return null
            }

          default:
            return null
        }
      })}
    </aside>
  )
}