export type StrategyProp = 'children' | 'important';
export type StrategiesProps = StrategyProp[];

export type CurrentClassProps = string;

export type InteractionProps =
  | ''
  | 'hover'
  | 'focus'
  | 'active'
  | 'b_active'
  | 'b_active-child';

export type BiteStyleProps = {
  id: string;
  value: string;
  screen: string;
  interaction?: InteractionProps;
  strategies?: StrategiesProps;
};
export type StrategyOptionProps = {
  label: string;
  id: string;
  value: string;
  icon: any;
};

export type InteractionOptionProps = {
  label: string;
  id: string;
  value: string;
  icon: any;
};

export type MetaProps = {
  bitesId: string;
};

export type OptionProps = {
  label: string;
  value: string;
  icon?: React.ReactNode;
};

export type CurrentOptionProp = {
  id: string;
  value: string;
};

export type CurrentOptionProps = CurrentOptionProp[];

export type StrategyOptionListProps = StrategiesProps[];

export type ModifierProps = {
  label: string;
  id: string;
  icon: React.ReactNode;
  options: OptionProps[];
  display?: 'icon' | 'label' | null;
  codex?: string;
  dynamicControl?: string;
};

export type CodexModiferProps = {
  id: string;
  selector: string;
  values: [];
};

export type CodexProps = {
  modifiers: CodexModiferProps[];
  units: {
    spacing: [];
    colors: [];
    spacingArea: [];
  };
};

export type CurrentDesignProps = BiteStyleProps[];
export type DefaultDesignProps = BiteStyleProps[];

export type ResponsiveProps = {
  value: string;
  label: string;
};

export type currentResponsiveProps = string;

export type OptionHookProps = {
  functionName: string;
  from: Number;
  to: Number;
  screen: [];
};

export type ModifierPanelProps = {
  currentControlId: string;
  currentControlLabel?: string;
  modifiers: ModifierProps[];
  display?: string | null;
  codex?: string;
  dynamicControl?: string;
  emitOptions: (options: { id: string; value: string }[]) => void;
};

export type ControlProps = {
  label: string;
  id: string;
  icon: React.ReactNode;
  display?: string;
  modifiers: any;
  hideChapter?: boolean;
  dynamicControl?: string;
  conditional?: { id: string; value: string };
  activeConditionalVale?: string;
};

export type FilterProps = {
  label: string;
  value: string;
  controls: string[];
  icon?: React.ReactNode;
};

export type ControlsProps = {
  controls: ControlProps[];
  filter?: FilterProps[];
};

export type ControlModifierProps = {
  control: ControlProps;
};

export type ControlPanelProps = {
  label: string;
  id: string;
  icon: React.ReactNode;
  controls: ControlProps[];
  expand?: boolean;
};

export type PanelEditorProps = {
  label: string;
  id: string;
  icon: React.ReactNode;
  controls: ControlProps[];
  expand?: boolean;
  filter?: FilterProps[];
};

export type PanelEditorWrapperProps = {
  panels: PanelEditorProps[];
  panelId?: string;
  setPanelId?: (modifier: string) => void;
  showResponsivePanel?: boolean;
  setCurrentTab?: (id: string) => void;
  content?: any;
};
export type DesignPanelProps = {
  key?: string;
  panels: any;
  defaultDesign: BiteStyleProps[];
  defaultClass: string;
  content: any;
  currentTab?: string | null;
  setCurrentTab?: () => void | null;
  emitDesign: (design: any) => void;
  showTabsList?: boolean;
  showResponsivePanel?: boolean;
};

export type SubDesignPanelProps = {
  key?: string;
  control: any;
  defaultDesign: BiteStyleProps[];
  defaultClass: string;
  currentTab?: string | null;
  responsive: string;
  setCurrentTab?: () => void | null;
  emitSubDesign: (design: any) => void;
};

export type OptionPanelProps = {
  options: OptionProps[];
  emitOptions: (options: { id: string; value: string }[]) => void;
  modifierId: string;
  display?: 'icon' | 'label' | null;
  codex?: string;
  activeOptionValue: string;
};

export type OptionPanelCategory = {
  id: string;
  label: string;
  options: OptionProps[];
  control: 'range' | 'buttons' | 'urlinput' | 'dropdown';
};

export type PanelCurrentProps = {
  emitCurrent: (design: any) => void;
  panels: {
    label: string;
    id: string;
    icon: React.ReactNode;
    content: string;
    controls: any;
  }[];
  setCurrentTab?: (id: string) => void | null;
  setPanelId?: (id: string) => void | null;
};

export type PresetCategory = string | 'style' | 'media' | 'visual' | 'layout';

export type PresetCurrent = {
  blockname: string;
};

export type PresetPanelProps = {
  props?: any;
};

export type ItemProps = {
  id?: number;
  handle: string;
  is_default: boolean;
  platform: 'site' | 'blockbite' | 'public';
  category: PresetCategory;
  blockname: string;
  title: string;
  version: string | '1.0.0';
  slug: string;
  content: any;
};

export type ResponseProps = {
  status: number;
  message: string;
  data: ItemProps;
};

export type PresetContent = {
  presetStyle: BiteStyleProps[];
  presetClass: string;
};

export type MatchDesignToOptionProps = {
  currentDesign: any;
  currentModifier: any;
  currentResponsive: any;
};

export type UpdateDesignListProps = {
  newOption: BiteStyleProps;
  currentDesign: BiteStyleProps[];
};

export type ResponsivePanelProps = {};

export type StrategiesPanelProps = {};

export type InteractionPanelProps = {};

export type TailwindModifierProps = {
  id: string;
  label: string;
  selector: string;
  codex?: string;
  icon?: any;
};