// Props 속성
export type IRadius = 'none' | 'small' | 'medium' | 'large' | 'full';
export type IScaling = '90%' | '95%' | '100%' | '105%' | '110%';
export type IWeight = 'regular' | 'medium' | 'semibold' | 'bold';
export type ITheme = 'light' | 'dark';
export type ITypoSize = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
export type ISize = 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
export type IAppearance = 'classic' | 'solid' | 'soft' | 'surface' | 'outline' | 'ghost';

// Chart point Style
export type PointStyle =
  | 'circle'
  | 'cross'
  | 'crossRot'
  | 'dash'
  | 'line'
  | 'rect'
  | 'rectRounded'
  | 'rectRot'
  | 'star'
  | 'triangle'
  | false;

// Radix Light Color
export type IColor =
  | 'slate'
  | 'olive'
  | 'sand'
  | 'tomato'
  | 'red'
  | 'ruby'
  | 'crimson'
  | 'pink'
  | 'plum'
  | 'purple'
  | 'violet'
  | 'iris'
  | 'indigo'
  | 'blue'
  | 'cyan'
  | 'teal'
  | 'jade'
  | 'green'
  | 'grass'
  | 'brown'
  | 'bronze'
  | 'gold'
  | 'sky'
  | 'mint'
  | 'lime'
  | 'yellow'
  | 'amber'
  | 'orange'
  | 'black'
  | 'white';

// Radix Dark Color
export type IDarkColor =
  | 'blackDark'
  | 'whiteDark'
  | 'slateDark'
  | 'oliveDark'
  | 'sandDark'
  | 'tomatoDark'
  | 'redDark'
  | 'rubyDark'
  | 'crimsonDark'
  | 'pinkDark'
  | 'plumDark'
  | 'purpleDark'
  | 'violetDark'
  | 'irisDark'
  | 'indigoDark'
  | 'blueDark'
  | 'cyanDark'
  | 'tealDark'
  | 'jadeDark'
  | 'greenDark'
  | 'grassDark'
  | 'brownDark'
  | 'bronzeDark'
  | 'goldDark'
  | 'skyDark'
  | 'mintDark'
  | 'limeDark'
  | 'yellowDark'
  | 'amberDark'
  | 'orangeDark'
  | 'slateDarkA'
  | 'oliveDarkA'
  | 'sandDarkA'
  | 'tomatoDarkA'
  | 'redDarkA'
  | 'rubyDarkA'
  | 'crimsonDarkA'
  | 'pinkDarkA'
  | 'plumDarkA'
  | 'purpleDarkA'
  | 'violetDarkA'
  | 'irisDarkA'
  | 'indigoDarkA'
  | 'blueDarkA'
  | 'cyanDarkA'
  | 'tealDarkA'
  | 'jadeDarkA'
  | 'greenDarkA'
  | 'grassDarkA'
  | 'brownDarkA'
  | 'bronzeDarkA'
  | 'goldDarkA'
  | 'skyDarkA'
  | 'mintDarkA'
  | 'limeDarkA'
  | 'yellowDarkA'
  | 'amberDarkA'
  | 'orangeDarkA';

// Radix Alpha Color
export type IAlphaColor =
  | 'slateA'
  | 'oliveA'
  | 'sandA'
  | 'tomatoA'
  | 'redA'
  | 'rubyA'
  | 'crimsonA'
  | 'pinkA'
  | 'plumA'
  | 'purpleA'
  | 'violetA'
  | 'irisA'
  | 'indigoA'
  | 'blueA'
  | 'cyanA'
  | 'tealA'
  | 'jadeA'
  | 'greenA'
  | 'grassA'
  | 'brownA'
  | 'bronzeA'
  | 'goldA'
  | 'skyA'
  | 'mintA'
  | 'limeA'
  | 'yellowA'
  | 'amberA'
  | 'orangeA';

export type IChartTitle = {
  text?: string | string[];
  display?: boolean;
  position?: 'top' | 'right' | 'bottom' | 'left';
  align?: 'start' | 'center' | 'end';
  font?: {
    size?: number;
    weight?: 'normal' | 'bold' | 'lighter' | 'bolder' | number;
    lineHeight?: number;
  };
};

export type IChartLegend = {
  display?: boolean;
  align?: 'start' | 'center' | 'end';
  position?: 'top' | 'right' | 'bottom' | 'left';
  maxHeight?: number;
  maxWidth?: number;
  fullSize?: boolean;
  reverse?: boolean;
  labels?: {
    boxWidth?: number;
    boxHeight?: number;
    padding?: number;
    textAlign?: 'left' | 'right' | 'center';
    color?: string;
    usePointStyle?: boolean;
    pointStyle?: PointStyle;
    pointStyleWidth?: number;
    useBorderRadius?: boolean;
    borderRadius?: number;
  };
  rtl?: boolean;
  textDirection?: 'rtl' | 'ltr';
  title?: {
    color?: string;
    display?: boolean;
    padding?: number;
    text?: string;
  };
};

export type IChartDatasets = {
  label?: string;
  backgroundColor?: string[] | string;
  borderColor?: string[] | string;
  borderWidth?: number;
  borderRadius?: number;
  borderDash?: number[];
  borderDashOffset?: number;
  hoverBackgroundColor?: string;
  hoverBorderColor?: string;
  hoverBorderWidth?: number;
  pointStyle?: PointStyle;
  offset?: number;
  spacing?: number;
  weight?: number;
  order?: number;
  hidden?: boolean;
};

export type IChartDataLabels = {
  display?: boolean;
  color?: string;
  align?: 'start' | 'center' | 'end' | number;
  backgroundColor?: string | ((context: any) => string);
  borderColor?: string;
  borderRadius?: number;
  borderWidth?: number;
  font?: object;
  formatter?: (x: number) => number;
  padding?: number;
};