import { PortfolioElement } from '@/src/types/portfolio';
import { ColorResult } from 'react-color';

export function updateStyling(styling: PortfolioElement['styling'], key: string, value?: string | number) {
  return { ...styling, [key]: value };
}

export function clearProperty(styling: PortfolioElement['styling'], property: keyof PortfolioElement['styling']) {
  if (!styling) return {};

  return Object.fromEntries(Object.entries(styling).filter(([key]) => key !== property));
}

export function createColorHandlers(
  styling: PortfolioElement['styling'],
  onStylingChange: (styling: Partial<PortfolioElement['styling']>) => void,
  property: 'textColor' | 'backgroundColor' | 'color'
) {
  return {
    onChange: (color: ColorResult) => onStylingChange(updateStyling(styling, property, color.hex)),

    onInputChange: (value: string) => onStylingChange(updateStyling(styling, property, value)),

    onClear: () => onStylingChange(clearProperty(styling, property as keyof PortfolioElement['styling'])),
  };
}
