import { IconType } from 'react-icons';
import { PortfolioElement } from './portfolio';
import { ColorResult } from 'react-color';
import { ReactNode } from 'react';
import { ComponentType } from '@/src/components/builder/config/componentRegistry';
import { PortfolioProject } from './project';

export interface AddComponentButtonProps {
  onClick: () => void;
  className?: string;
  position?: 'top' | 'bottom';
  variant?: 'hover' | 'visible';
  section?: boolean;
}

export interface ComponentControlsProps {
  element: PortfolioElement;
  onElementSelect: (element: PortfolioElement) => void;
  onElementRemove: (id: string) => void;
  onElementMove: (id: string, direction: 'up' | 'down') => void;
  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  iconSize?: number;
  className?: string;
}

export interface ControlButtonProps {
  icon: IconType;
  onClick: () => void;
  title: string;
  iconSize: number;
}

export interface StylerBaseProps {
  styling: PortfolioElement['styling'];
  onStylingChange: (styling: Partial<PortfolioElement['styling']>) => void;
}

export interface ComponentStylerProps {
  styling?: PortfolioElement['styling'];
  onStylingChange: (styling: PortfolioElement['styling']) => void;
  enabledOptions?: {
    textColor?: boolean;
    padding?: boolean;
    alignment?: boolean;
    backgroundColor?: boolean;
    fontSize?: boolean;
    fontFamily?: boolean;
    fontWeight?: boolean;
    textDecoration?: boolean;
    fontStyle?: boolean;
    color?: boolean;
    width?: { min?: number; max?: number; defaultValue?: number };
    height?: { min?: number; max?: number; defaultValue?: number };
  };
}

export interface ColorPickerProps {
  label: string;
  icon: React.ReactNode;
  value: string | undefined;
  onChange: (color: ColorResult) => void;
  onInputChange: (value: string) => void;
  onClear: () => void;
}

export interface AlignmentButtonProps {
  value: 'start' | 'center' | 'end';
  currentValue: string | undefined;
  onClick: () => void;
  icon: React.ReactNode;
}

export interface StyleButtonProps {
  active: boolean;
  onClick: () => void;
  children: React.ReactNode;
}

export interface TextStyleControlProps extends StylerBaseProps {
  enabledOptions: {
    fontStyle?: boolean;
    textDecoration?: boolean;
  };
}

export interface HistoryItem {
  id: string;
  timestamp: number;
  title: string;
  subtitle?: string;
}

export interface HistoryPopoverProps {
  items: HistoryItem[];
  onRestore: (id: string) => Promise<boolean> | void;
  isLoading?: boolean;
  title: string;
  description: string;
  icon?: 'history' | 'clock';
  buttonText: string;
}

export interface SliderProps {
  isOpen: boolean;
  onToggle: () => void;
  side: 'left' | 'right';
  children: ReactNode;
  title: string;
  handleClose: () => void;
}

export interface SliderOpenerProps {
  isOpen: boolean;
  onToggle: () => void;
  side: 'left' | 'right';
}

export interface RenderComponentOptions {
  controlsPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
  iconSize?: number;
  showControls?: boolean;
  className?: string;
}

export interface RenderComponentProps {
  element: PortfolioElement;
  options?: RenderComponentOptions;
  setSectionContext?: (sectionContext: { parentId: string; position: string; top?: boolean }) => void;
  setShowSelector?: (showSelector: boolean) => void;
  isPublished?: boolean;
  isInSection?: boolean;
}

export interface BuilderContextProps {
  onElementSelect: (element: PortfolioElement) => void;
  onElementRemove: (id: string) => void;
  onElementMove: (id: string, direction: 'up' | 'down') => void;
  onElementUpdate: (id: string, props: Record<string, unknown>) => void;
  onAddComponent: (
    index: number,
    componentType: ComponentType,
    initialProps?: Partial<PortfolioElement['props']>
  ) => void;
  onAddToSection: (
    parentId: string,
    position: string,
    componentType: ComponentType,
    initialProps?: Partial<PortfolioElement['props']>,
    top?: boolean
  ) => void;
  selectedElementId?: string | null;
  isPreview?: boolean;
  portfolioProjects?: PortfolioProject[];
}
