'use client';

import { Button } from '@/src/components/builder/elements/Button';
import { CustomCode } from '@/src/components/builder/elements/CustomCode';
import { Heading } from '@/src/components/builder/elements/Heading';
import { Image } from '@/src/components/builder/elements/Image';
import { Text } from '@/src/components/builder/elements/Text';
import { Socials } from '@/src/components/builder/elements/Socials';

import ButtonPreview from '@/assets/elements/button.png';
import CustomCodePreview from '@/assets/elements/code.png';
import HeadingPreview from '@/assets/elements/heading.png';
import ImagePreview from '@/assets/elements/image.png';
import SocialsPreview from '@/assets/elements/socials.png';
import TextPreview from '@/assets/elements/text.png';

import HeaderWithMenuPreview from '@/assets/headers/header_1.png';
import HeaderWithButtonPreview from '@/assets/headers/header_2.png';
import HeaderWithSocialsPreview from '@/assets/headers/header_3.png';
import { HeaderWithMenu } from '@/src/components/builder/headers/HeaderWithMenu';
import { HeaderWithButton } from '@/src/components/builder/headers/HeaderWithButton';
import { HeaderWithSocials } from '@/src/components/builder/headers/HeaderWithSocials';

import TechnologiesBubbleEffectPreview from '@/assets/technologies/technology_3.png';
import TechnologiesGlowingCardsPreview from '@/assets/technologies/technology_1.png';
import TechnologiesIconsWithNamesPreview from '@/assets/technologies/technology_4.png';
import TechnologiesInfiniteLoopPreview from '@/assets/technologies/technology_2.png';
import { TechnologiesBubbleEffect } from '@/src/components/builder/technologies/TechnologiesBubbleEffect';
import { TechnologiesGlowingCards } from '@/src/components/builder/technologies/TechnologiesGlowingCards';
import { TechnologiesIconsWithNames } from '@/src/components/builder/technologies/TechnologiesIconsWithNames';
import { TechnologiesInfiniteLoop } from '@/src/components/builder/technologies/TechnologiesInfiniteLoop';

import DetailedCareerPreview from '@/assets/timelines/timeline_1.png';
import TimelineCareerPreview from '@/assets/timelines/timeline_2.png';
import ModernTimelinePreview from '@/assets/timelines/timeline_3.png';
import HorizontalTimelinePreview from '@/assets/timelines/timeline_4.png';
import { DetailedCareer } from '@/src/components/builder/timeline/DetailedCareer';
import { HorizontalTimeline } from '@/src/components/builder/timeline/HorizontalTimeline';
import { ModernTimeline } from '@/src/components/builder/timeline/ModernTimeline';
import { TimelineCareer } from '@/src/components/builder/timeline/TimelineCareer';

import MinimalContactFormPreview from '@/assets/contactForms/contact_1.png';
import BorderedContactFormPreview from '@/assets/contactForms/contact_4.png';
import FloatingContactFormPreview from '@/assets/contactForms/contact_3.png';
import GradientContactFormPreview from '@/assets/contactForms/contact_2.png';
import { BorderedContactForm } from '@/src/components/builder/contact/BorderedContactForm';
import { FloatingContactForm } from '@/src/components/builder/contact/FloatingContactForm';
import { GradientContactForm } from '@/src/components/builder/contact/GradientContactForm';
import { MinimalContactForm } from '@/src/components/builder/contact/MinimalContactForm';

import ModernProjectCardsPreview from '@/assets/projects/project_1.png';
import SpotlightProjectsPreview from '@/assets/projects/project_4.png';
import MasonryProjectsPreview from '@/assets/projects/project_2.png';
import HorizontalProjectsPreview from '@/assets/projects/project_3.png';
import { HorizontalProjects } from '@/src/components/builder/projects/HorizontalProjects';
import { MasonryProjects } from '@/src/components/builder/projects/MasonryProjects';
import { ModernProjectCards } from '@/src/components/builder/projects/ModernProjectCards';
import { SpotlightProjects } from '@/src/components/builder/projects/SpotlightProjects';

import TwoColumnsPreview from '@/assets/sections/section_1.png';
import ThreeColumnsPreview from '@/assets/sections/section_2.png';
import TwoColumnsLargePreview from '@/assets/sections/section_3.png';
import TwoColumnsSmallPreview from '@/assets/sections/section_4.png';
import { ThreeColumns } from '@/src/components/builder/sections/ThreeColumns';
import { TwoColumns } from '@/src/components/builder/sections/TwoColumns';

import { defaultProps } from './defaultProps';

import { HeaderEditForm } from '@/src/components/builder/headers/HeaderEditForm';
import { HeadingEditForm } from '@/src/components/builder/elements/HeadingEditForm';
import { TimelineEditForm } from '@/src/components/builder/timeline/TimelineEditForm';
import { TechnologyEditForm } from '@/src/components/builder/technologies/TechnologyEditForm';
import { ProjectEditForm } from '@/src/components/builder/projects/ProjectEditForm';
import { ImageEditForm } from '@/src/components/builder/elements/ImageEditForm';
import { TextEditForm } from '@/src/components/builder/elements/TextEditForm';
import { ButtonEditForm } from '@/src/components/builder/elements/ButtonEditForm';
import { CodeEditForm } from '@/src/components/builder/elements/CodeEditForm';
import { ContactEditForm } from '@/src/components/builder/contact/ContactEditForm';
import { SocialsEditForm } from '@/src/components/builder/elements/SocialsEditForm';
import { SectionsEditForm } from '@/src/components/builder/sections/SectionsEditForm';

export const components = {
  header_1: {
    component: HeaderWithMenu,
    defaultProps: defaultProps.header_1,
    title: 'Header with navigation',
    preview: HeaderWithMenuPreview.src,
    group: 'headers',
    editForm: HeaderEditForm,
  },
  header_2: {
    component: HeaderWithButton,
    defaultProps: defaultProps.header_2,
    title: 'Header with button',
    preview: HeaderWithButtonPreview.src,
    group: 'headers',
    editForm: HeaderEditForm,
  },
  header_3: {
    component: HeaderWithSocials,
    defaultProps: defaultProps.header_3,
    title: 'Header with social media icons',
    preview: HeaderWithSocialsPreview.src,
    group: 'headers',
    editForm: HeaderEditForm,
  },

  tech_1: {
    component: TechnologiesGlowingCards,
    defaultProps: defaultProps.tech_1,
    title: 'Technologies Glowing Cards',
    preview: TechnologiesGlowingCardsPreview.src,
    group: 'technologies',
    editForm: TechnologyEditForm,
  },
  tech_2: {
    component: TechnologiesInfiniteLoop,
    defaultProps: defaultProps.tech_2,
    title: 'Technologies Infinite Loop',
    preview: TechnologiesInfiniteLoopPreview.src,
    group: 'technologies',
    editForm: TechnologyEditForm,
  },
  tech_3: {
    component: TechnologiesBubbleEffect,
    defaultProps: defaultProps.tech_3,
    title: 'Technologies Bubble Effect',
    preview: TechnologiesBubbleEffectPreview.src,
    group: 'technologies',
    editForm: TechnologyEditForm,
  },
  tech_4: {
    component: TechnologiesIconsWithNames,
    defaultProps: defaultProps.tech_4,
    title: 'Technologies Icons With Names',
    preview: TechnologiesIconsWithNamesPreview.src,
    group: 'technologies',
    editForm: TechnologyEditForm,
  },

  timeline_1: {
    component: DetailedCareer,
    defaultProps: defaultProps.timeline_1,
    title: 'Vertical Timeline',
    preview: DetailedCareerPreview.src,
    group: 'timeline',
    editForm: TimelineEditForm,
  },
  timeline_2: {
    component: TimelineCareer,
    defaultProps: defaultProps.timeline_2,
    title: 'Zigzag Timeline',
    preview: TimelineCareerPreview.src,
    group: 'timeline',
    editForm: TimelineEditForm,
  },
  timeline_3: {
    component: ModernTimeline,
    defaultProps: defaultProps.timeline_3,
    title: 'Modern Timeline Cards',
    preview: ModernTimelinePreview.src,
    group: 'timeline',
    editForm: TimelineEditForm,
  },
  timeline_4: {
    component: HorizontalTimeline,
    defaultProps: defaultProps.timeline_4,
    title: 'Horizontal Timeline',
    preview: HorizontalTimelinePreview.src,
    group: 'timeline',
    editForm: TimelineEditForm,
  },

  project_1: {
    component: ModernProjectCards,
    defaultProps: defaultProps.project_1,
    title: 'Tilted Project Cards',
    preview: ModernProjectCardsPreview.src,
    group: 'projects',
    editForm: ProjectEditForm,
  },
  project_2: {
    component: MasonryProjects,
    defaultProps: defaultProps.project_2,
    title: 'Vertical Project Cards',
    preview: MasonryProjectsPreview.src,
    group: 'projects',
    editForm: ProjectEditForm,
  },
  project_3: {
    component: HorizontalProjects,
    defaultProps: defaultProps.project_3,
    title: 'Minimalistic Horizontal Project Cards',
    preview: HorizontalProjectsPreview.src,
    group: 'projects',
    editForm: ProjectEditForm,
  },
  project_4: {
    component: SpotlightProjects,
    defaultProps: defaultProps.project_4,
    title: 'Spotlight Projects',
    preview: SpotlightProjectsPreview.src,
    group: 'projects',
    editForm: ProjectEditForm,
  },

  contact_1: {
    component: MinimalContactForm,
    defaultProps: defaultProps.contact_1,
    title: 'Minimal Contact Form',
    preview: MinimalContactFormPreview.src,
    group: 'contact',
    editForm: ContactEditForm,
  },
  contact_2: {
    component: GradientContactForm,
    defaultProps: defaultProps.contact_2,
    title: 'Gradient Contact Form',
    preview: GradientContactFormPreview.src,
    group: 'contact',
    editForm: ContactEditForm,
  },
  contact_3: {
    component: FloatingContactForm,
    defaultProps: defaultProps.contact_3,
    title: 'Floating Contact Form',
    preview: FloatingContactFormPreview.src,
    group: 'contact',
    editForm: ContactEditForm,
  },
  contact_4: {
    component: BorderedContactForm,
    defaultProps: defaultProps.contact_4,
    title: 'Bordered Contact Form',
    preview: BorderedContactFormPreview.src,
    group: 'contact',
    editForm: ContactEditForm,
  },

  section_1: {
    component: TwoColumns,
    defaultProps: defaultProps.section_1,
    title: 'Two Columns',
    preview: TwoColumnsPreview.src,
    group: 'sections',
    editForm: SectionsEditForm,
  },
  section_2: {
    component: ThreeColumns,
    defaultProps: defaultProps.section_2,
    title: 'Three Columns',
    preview: ThreeColumnsPreview.src,
    group: 'sections',
    editForm: SectionsEditForm,
  },
  section_3: {
    component: TwoColumns,
    defaultProps: defaultProps.section_3,
    title: 'Two Columns',
    preview: TwoColumnsLargePreview.src,
    group: 'sections',
    editForm: SectionsEditForm,
  },
  section_4: {
    component: TwoColumns,
    defaultProps: defaultProps.section_4,
    title: 'Two Columns',
    preview: TwoColumnsSmallPreview.src,
    group: 'sections',
    editForm: SectionsEditForm,
  },

  heading: {
    component: Heading,
    defaultProps: defaultProps.heading,
    title: 'Heading',
    preview: HeadingPreview.src,
    group: 'elements',
    editForm: HeadingEditForm,
  },
  text: {
    component: Text,
    defaultProps: defaultProps.text,
    title: 'Text',
    preview: TextPreview.src,
    group: 'elements',
    editForm: TextEditForm,
  },
  image: {
    component: Image,
    defaultProps: defaultProps.image,
    title: 'Image',
    preview: ImagePreview.src,
    group: 'elements',
    editForm: ImageEditForm,
  },
  button: {
    component: Button,
    defaultProps: defaultProps.button,
    title: 'Button',
    preview: ButtonPreview.src,
    group: 'elements',
    editForm: ButtonEditForm,
  },
  customCode: {
    component: CustomCode,
    defaultProps: defaultProps.customCode,
    title: 'Custom Code',
    preview: CustomCodePreview.src,
    group: 'elements',
    editForm: CodeEditForm,
  },
  socials: {
    component: Socials,
    defaultProps: defaultProps.socials,
    title: 'Socials',
    preview: SocialsPreview.src,
    group: 'elements',
    editForm: SocialsEditForm,
  },
} as const;

export type ComponentType = keyof typeof components;

export function isValidComponentName(componentName: string): componentName is ComponentType {
  return componentName in components;
}

export function getComponentByName(componentName: string) {
  if (isValidComponentName(componentName)) {
    return components[componentName];
  }
  return null;
}
