import { ColorConfig } from '@/src/types/color';
import { NavItem } from '@/src/types/header';
import { SocialsProps } from '@/src/types/social';
import { TechnologiesProps } from '@/src/types/technology';
import { TimelineProps } from '@/src/types/timeline';

export const defaultNavItems: NavItem[] = [
  { text: 'Home', href: '#home' },
  { text: 'Technologies', href: '#technologies' },
  { text: 'Projects', href: '#projects' },
  { text: 'Career', href: '#career' },
  { text: 'Contact', href: '#contact' },
];

export const colorConfigs: ColorConfig[] = [
  { name: 'background', label: 'Background', defaultColor: '#FFFFFF' },
  { name: 'text', label: 'Text', defaultColor: '#1F2937' },
  { name: 'accent', label: 'Accent', defaultColor: '#298C39' },
];

export const defaultTechnologiesData: TechnologiesProps = {
  technologies: ['React', 'Typescript', 'NextJS', 'TailwindCSS', 'NodeJS', 'Javascript', 'HTML', 'CSS'],
  styling: {
    align: 'start',
    padding: {
      top: 20,
      bottom: 20,
    },
  },
};

export const defaultSocials: SocialsProps = {
  socials: [
    {
      platform: 'GitHub',
      url: 'https://github.com/',
    },
    {
      platform: 'LinkedIn',
      url: 'https://linkedin.com/in/',
    },
    {
      platform: 'Twitter',
      url: 'https://twitter.com/',
    },
  ],
  width: 32,
};

export const defaultTimelineData: TimelineProps = {
  timelineData: [
    {
      date: '2014 - 2025',
      position: 'Frontend Developer',
      company: 'Oracle',
      bullets: [
        'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
        'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
        'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      ],
      icon: 'FaReact',
    },
    {
      date: '2014 - 2025',
      position: 'Frontend Developer',
      company: 'Oracle',
      bullets: [
        'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
        'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
        'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      ],
      icon: 'FaReact',
    },
    {
      date: '2014 - 2025',
      position: 'Frontend Developer',
      company: 'Oracle',
      bullets: [
        'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
        'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
        'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
      ],
      icon: 'FaReact',
    },
  ],
};

export enum ColumnWidth {
  small = 'small',
  medium = 'medium',
  large = 'large',
}

export const defaultProps = {
  header_1: {
    showThemeToggle: true,
    items: defaultNavItems,
    logo: 'FaCode',
  },
  header_2: { showThemeToggle: true, buttonText: 'Button', buttonHref: '#', logo: 'FaCode' },
  header_3: {
    showThemeToggle: true,
    socials: defaultSocials.socials,
    logo: 'FaCode',
  },
  tech_1: defaultTechnologiesData,
  tech_2: defaultTechnologiesData,
  tech_3: defaultTechnologiesData,
  tech_4: defaultTechnologiesData,
  timeline_1: defaultTimelineData,
  timeline_2: defaultTimelineData,
  timeline_3: defaultTimelineData,
  timeline_4: defaultTimelineData,
  project_1: { projects: [] },
  project_2: { projects: [] },
  project_3: { projects: [] },
  project_4: { projects: [] },
  contact_1: {},
  contact_2: {},
  contact_3: {},
  contact_4: {},
  section_1: {},
  section_2: {},
  section_3: { leftWidth: ColumnWidth.large },
  section_4: { leftWidth: ColumnWidth.small },
  heading: { text: 'Heading', highlight: '' },
  socials: defaultSocials,
  text: {
    json: {
      type: 'doc',
      content: [
        {
          type: 'paragraph',
          content: [
            {
              type: 'text',
              text: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Integer imperdiet lectus quis justo. Nullam lectus justo, vulputate eget mollis sed, tempor sed magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus luctus egestas leo. Nullam sapien sem, ornare ac, nonummy non, lobortis a enim. Nullam justo enim, consectetuer nec, ullamcorper ac, vestibulum in, elit. Nullam sit amet magna in magna gravida vehicula. Integer vulputate sem a nibh rutrum consequat. Donec vitae arcu. Aenean vel massa quis mauris vehicula lacinia. Pellentesque arcu. Aliquam in lorem sit amet leo accumsan lacinia.',
            },
          ],
        },
      ],
    },
  },
  image: { src: '', alt: 'Image' },
  button: { text: 'Button' },
  customCode: {
    code: `<!-- Custom HTML Example -->
      <div style="padding: 20px; border: 2px dashed #ccc; border-radius: 8px; background-color: #f8f9fa;">
        <h3 style="color: #3b82f6; margin-top: 0;">Custom HTML Content</h3>
        
        <p>You can add any valid HTML here, including:</p>
        <ul style="margin-bottom: 15px;">
          <li>Formatted text with <strong>bold</strong> or <em>italic</em> styling</li>
          <li>Lists, tables, and other HTML elements</li>
          <li>Custom styles using inline CSS</li>
        </ul>
        
        <div style="display: flex; gap: 10px; margin-top: 15px;">
          <a href="#" style="display: inline-block; padding: 8px 16px; background-color: var(--color-accent, #3b82f6); color: white; text-decoration: none; border-radius: 4px;">Example Button</a>
          <a href="#" style="display: inline-block; padding: 8px 16px; border: 1px solid var(--color-accent, #3b82f6); color: var(--color-accent, #3b82f6); text-decoration: none; border-radius: 4px;">Second Button</a>
        </div>
      </div>`,
    display: 'block',
  },
};
