import { ColorStyle, DarkColorStyle, colorOptions, chartColorOptions } from '@/lib/color/constants';
import type { IAppearance, IRadius, IScaling, IWeight, ISize, ITheme, ITypoSize } from './types';
import * as lightColors from '@/lib/color/light';

export const radiusOptions: IRadius[] = ['none', 'small', 'medium', 'large', 'full'];
export const typoSizeOptions: ITypoSize[] = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
export const scalingOptions: IScaling[] = ['90%', '95%', '100%', '105%', '110%'];
export const sizeOptions: ISize[] = ['x-small', 'small', 'medium', 'large', 'x-large'];
export const weightOptions: IWeight[] = ['regular', 'medium', 'semibold', 'bold'];
export const themeOptions: ITheme[] = ['light', 'dark'];
export const appearanceOptions: IAppearance[] = [
  'classic',
  'ghost',
  'outline',
  'soft',
  'solid',
  'surface'
];

//차트
export const labelPositionList = ['top', 'bottom', 'left', 'right'];
export const pointStyleList = [
  'circle',
  'cross',
  'crossRot',
  'dash',
  'line',
  'rect',
  'rectRounded',
  'rectRot',
  'star',
  'triangle',
  false
];

export const radiusVariants = {
  // 체크박스
  small: {
    none: 'rounded-none',
    small: 'rounded-[3px]',
    medium: 'rounded',
    large: 'rounded',
    full: 'rounded'
  },
  // 라디오버튼, 스위치, 태그, 배지, 버튼, 텍스트인풋, 텍스트영역, 페이지네이션
  base: {
    none: 'rounded-none',
    small: 'rounded-[3px]',
    medium: 'rounded', // 4px
    large: 'rounded-md', // 6px
    full: 'rounded-full'
  },
  // 배너
  large: {
    none: 'rounded-none',
    small: 'rounded',
    medium: 'rounded-lg', // 8px
    large: 'rounded-xl', // 12px
    full: 'rounded-2xl' // 16px
  },
  // 다이얼로그, 바텀시트, 그리드, 카드
  'extra-large': {
    none: 'rounded-none',
    small: 'rounded',
    medium: 'rounded-lg',
    large: 'rounded-xl',
    full: 'rounded-xl'
  },
  // Dropdown, Context Menu 아이템
  'menu-item': {
    none: 'rounded-none',
    small: 'rounded-[1px]',
    medium: 'rounded-sm',
    large: 'rounded',
    full: 'rounded'
  }
};

export const weightVariants = {
  regular: 'font-normal', // 400
  medium: 'font-medium', // 500
  semibold: 'font-semibold', // 600
  bold: 'font-bold' // 700
};

export const scalingVariants = {
  '90%': 'scale-90',
  '95%': 'scale-95',
  '100%': 'scale-100',
  '105%': 'scale-105',
  '110%': 'scale-110'
};

// 스토리북 공통 argTypes 설정
export const commonArgTypes = {
  typoSize: {
    table: {
      category: 'Theme Props',
      type: { summary: '1 ~ 9' }
    },
    control: { type: 'select' },
    options: typoSizeOptions,
    defaultValue: { summary: '3' }
  },
  scaling: {
    table: {
      category: 'Theme Props',
      type: { summary: scalingOptions.join(' | ') }
    },
    control: { type: 'select' },
    options: scalingOptions,
    defaultValue: { summary: '100%' }
  },
  weight: {
    table: {
      category: 'Theme Props',
      type: { summary: weightOptions.join(' | ') }
    },
    options: weightOptions,
    control: { type: 'select' },
    defaultValue: { summary: 'medium' }
  },
  radius: {
    table: {
      category: 'Theme Props',
      type: { summary: radiusOptions.join(' | ') }
    },
    options: radiusOptions,
    control: { type: 'select' },
    defaultValue: { summary: 'medium' }
  },
  color: {
    table: {
      category: 'Theme Props',
      type: { summary: 'colorVariants' }
    },
    options: colorOptions,
    control: { type: 'select' },
    defaultValue: { summary: 'red' }
  },
  basicText: {
    table: {
      category: 'Props',
      type: { summary: 'string' }
    },
    control: 'text'
  },
  appearance: {
    table: {
      category: 'Props',
      type: { summary: appearanceOptions.join(' | ') }
    },
    options: appearanceOptions,
    control: { type: 'select' },
    defaultValue: { summary: 'solid' }
  },
  size: {
    table: {
      category: 'Props',
      type: { summary: sizeOptions.join(' | ') }
    },
    control: { type: 'select' },
    options: sizeOptions,
    defaultValue: { summary: 'medium' }
  },
  isColorMixed: {
    table: {
      category: 'Props',
      type: { summary: 'boolean' }
    },
    description: `- 차트 기본 색상 스타일 
        - true인 경우 색상이 교차됨, false인 경우 색상 순차적으로 사용`,
    control: 'readonly',
    defaultValue: { summary: 'true' }
  },
  chartAppearance: {
    table: {
      category: 'Props',
      type: { summary: 'solid | soft' }
    },
    options: ['solid', 'soft'],
    control: 'readonly',
    defaultValue: { summary: 'solid' },
    description: `- 차트 기본 색상 스타일 
  - 배경색과 테두리색 기본 스타일을 지정해준다`
  },
  datasets: {
    name: 'datasets',
    description: '차트에 사용할 데이터셋',
    table: {
      category: 'Props',
      type: { summary: 'object' }
    }
  },
  labels: {
    description: '차트 위에 표시될 라벨들',
    table: {
      category: 'Props',
      type: { summary: 'object' }
    }
  }
};

export const chartColorStyle = () => {
  let colorValues: Record<string, Record<number, string>> = lightColors;
  let colorMappings: Record<string, string> = {};

  chartColorOptions.forEach((color: string) => {
    colorMappings[color] = colorValues[color][9];
  });

  return colorMappings;
};

export const chartTitleArgTypes = {
  title: {
    description: '차트 타이틀',
    table: {
      category: 'Props',
      type: { summary: 'object' }
    }
  },
  'title.display': {
    description: '타이틀 표시 여부',
    table: {
      category: 'Title Props',
      type: { summary: 'boolean' }
    },
    control: { type: 'boolean', defaultValue: false },
    defaultValue: { summary: false }
  },
  'title.text': {
    description: '타이틀 내용',
    table: {
      category: 'Title Props',
      type: { summary: 'string | string[]' }
    },
    control: { type: 'text' },
    defaultValue: { summary: '' }
  },
  'title.position': {
    description: '타이틀 위치',
    table: {
      category: 'Title Props',
      type: { summary: 'top | right | bottom | left' }
    },
    control: { type: 'select' },
    options: ['top', 'right', 'bottom', 'left'],
    defaultValue: { summary: 'top' }
  },
  'title.align': {
    description: '타이틀 정렬',
    table: {
      category: 'Title Props',
      type: { summary: 'start | center | end' }
    },
    control: { type: 'select' },
    options: ['start', 'center', 'end'],
    defaultValue: { summary: 'top' }
  },
  'title.font.size': {
    description: '타이틀 폰트 크기',
    table: {
      category: 'Title Props',
      type: { summary: 'number' }
    },
    control: { type: 'text' },
    defaultValue: { summary: 12 }
  }
};

export const chartLegendArgTypes = {
  legend: {
    description: '차트 범례',
    table: {
      category: 'Props',
      type: { summary: 'object' }
    }
  },
  'legend.display': {
    description: '범례 표시 여부',
    table: {
      category: 'Legend Props',
      type: { summary: 'boolean' }
    },
    control: { type: 'boolean' },
    defaultValue: { summary: true }
  },
  'legend.align': {
    description: '범례 정렬',
    table: {
      category: 'Legend Props',
      type: { summary: 'start | center | end' }
    },
    control: { type: 'select' },
    options: ['start', 'center', 'end'],
    defaultValue: { summary: 'center' }
  },
  'legend.position': {
    description: '범례 위치',
    table: {
      category: 'Legend Props',
      type: { summary: 'top | right | bottom | left' }
    },
    control: { type: 'select' },
    options: ['top', 'right', 'bottom', 'left'],
    defaultValue: { summary: 'top' }
  },
  'legend.maxHeight': {
    description: '범례 최대 높이(픽셀)',
    table: {
      category: 'Legend Props',
      type: { summary: 'number' }
    },
    control: { type: 'text' },
    defaultValue: { summary: 12 }
  },
  'legend.maxWidth': {
    description: '범례 최대 길이(픽셀)',
    table: {
      category: 'Legend Props',
      type: { summary: 'number' }
    },
    control: { type: 'text' },
    defaultValue: { summary: 12 }
  },
  'legend.title.display': {
    description: '범례 타이틀 표시 여부',
    table: {
      category: 'Legend Props',
      type: { summary: 'boolean' }
    },
    control: { type: 'boolean' },
    defaultValue: { summary: false }
  },
  'legend.title.text': {
    description: '범례 타이틀 문구',
    table: {
      category: 'Legend Props',
      type: { summary: 'string' }
    },
    control: { type: 'text' },
    defaultValue: { summary: '' }
  },
  'legend.labels.usePointStyle': {
    description: '범례 스타일 사용여부',
    table: {
      category: 'Legend Props',
      type: { summary: 'boolean' }
    },
    control: { type: 'boolean' },
    defaultValue: { summary: 'false' }
  },
  'legend.labels.pointStyle': {
    description: `- 라벨 포인트 스타일
      - usePointStyle가 true인 경우 적용`,
    table: {
      category: 'Legend Props',
      type: { summary: pointStyleList.join(' | ') }
    },
    control: { type: 'select' },
    options: pointStyleList,
    defaultValue: { summary: 'false' }
  }
};

export const chartDatasetsArgsTypes = {
  'datasets[n].data': {
    description: '데이터셋 데이터',
    table: {
      category: 'Dataset Props',
      type: { summary: 'object | object[] | number[] | string[]' }
    }
  },
  'datasets[n].label': {
    description: '데이터셋 라벨',
    table: {
      category: 'Dataset Props',
      type: { summary: 'string' }
    }
  },
  'datasets[n].backgroundColor': {
    description: '데이터셋 배경 색상',
    table: {
      category: 'Dataset Props',
      type: { summary: 'object' }
    }
  },
  'datasets[n].borderColor': {
    description: '데이터셋 테두리 색상',
    table: {
      category: 'Dataset Props',
      type: { summary: 'object' }
    }
  },
  'datasets[n].borderWidth': {
    description: '데이터셋 테두리 두꼐',
    table: {
      category: 'Dataset Props',
      type: { summary: 'number' }
    }
  },
  'datasets[n].borderRadius': {
    description: '데이터셋 둥글기',
    table: {
      category: 'Dataset Props',
      type: { summary: 'number' }
    }
  },
  'datasets[n].hoverBackgroundColor': {
    description: '데이터셋 마우스 호버 시 배경 색상',
    table: {
      category: 'Dataset Props',
      type: { summary: 'object' }
    }
  },
  'datasets[n].hoverBorderColor': {
    description: '데이터셋 마우스 호버 시 테두리 색상',
    table: {
      category: 'Dataset Props',
      type: { summary: 'object' }
    }
  },
  'datasets[n].hoverBorderWidth': {
    description: '데이터셋 호버 시 테두리 두께',
    table: {
      category: 'Dataset Props',
      type: { summary: 'number' }
    }
  },
  'datasets[n].hoverBorderRadius': {
    description: '데이터셋 호버 시 둥글기',
    table: {
      category: 'Dataset Props',
      type: { summary: 'number' }
    }
  },
  'datasets[n].order': {
    description: '데이터셋 순서',
    table: {
      category: 'Dataset Props',
      type: { summary: 'number' }
    }
  },
  'datasets[n].hidden': {
    description: '데이터셋 표시 여부',
    table: {
      category: 'Dataset Props',
      type: { summary: 'boolean' }
    }
  },
  'datasets[n].borderDash': {
    description: `- 차트의 각 섹션의 테두리를 점선으로 만듬
        - ex)[5,5]: 5픽셀 길이의 선과 5픽셀 길이의 간격`,
    table: {
      category: 'Dataset Props',
      type: { summary: 'number[]' }
    }
  },
  'datasets[n].borderDashOffset': {
    description: `- 점선의 시작 위치 조정
      - ex) 2: 점선의 시작 지점을 2픽셀 이동`,
    table: {
      category: 'Dataset Props',
      type: { summary: 'number' }
    }
  },
  'datasets[n].offset': {
    description: '각 섹션 사이의 간격 조정',
    table: {
      category: 'Dataset Props',
      type: { summary: 'number' }
    }
  },
  'datasets[n].weight': {
    description: '각 섹션의 상대적인 두께를 설정, 섹션이 차지하는 공간의 비율을 조정',
    table: {
      category: 'Dataset Props',
      type: { summary: 'number' }
    }
  }
};

export const chartDatalabelsArgsTypes = {
  datalabels: {
    table: {
      disable: true
    }
  },
  'datalabels.display': {
    description: '차트 데이터 라벨 표시 여부',
    table: {
      category: 'Datalabels Props',
      type: { summary: 'boolean' }
    },
    control: { type: 'boolean' },
    defaultValue: { summary: false }
  },
  'datalabels.color': {
    description: '차트 데이터 라벨 색상',
    table: {
      category: 'Datalabels Props',
      type: { summary: 'string' }
    },
    control: { type: 'select' },
    options: ['white', 'gray', 'black'],
    defaultValue: { summary: 'gray' }
  }
};

export const blackText = ['sky', 'mint', 'lime', 'yellow', 'amber', 'orange', 'white'];

export const primaryColorStyle = () => {
  let color: Record<string, string> = {};

  for (let i in ColorStyle) {
    const darkColor = `${i}Dark`;

    color[i] = blackText.includes(i)
      ? `bg-${ColorStyle[i]} text-slate-12 dark:bg-${DarkColorStyle[darkColor]} dark:text-slateDark-12`
      : `bg-${ColorStyle[i]} text-white dark:bg-${DarkColorStyle[darkColor]} dark:text-slateDark-1`;
  }

  return color;
};

export const bgColorStyle = () => {
  let color: Record<string, string> = {};

  for (let i in ColorStyle) {
    const darkColor = `${i}Dark`;
    color[i] = `bg-${ColorStyle[i]} dark:bg-${DarkColorStyle[darkColor]}`;
  }

  return color;
};

export const textColorStyle = () => {
  let color: Record<string, string> = {};

  for (let i in ColorStyle) {
    const darkColor = `${i}Dark`;
    color[i] = `text-${ColorStyle[i]} dark:text-${DarkColorStyle[darkColor]}`;
  }

  return color;
};

const makeClassName = (
  type: {
    light: { default: string; hover: string; active: string; disable: string };
    dark: { default: string; hover: string; active: string; disable: string };
  },
  isClickable: boolean
) => {
  let className = '';
  className += `${type.light.default} ${type.dark.default}`;

  if (isClickable) {
    className += ` ${type.light.hover} ${type.light.active} ${type.light.disable} ${type.dark.hover} ${type.dark.active} ${type.dark.disable}`;
  }
  return className;
};

export const appearanceStyle = (type: string, color: string, isClickable: boolean = true) => {
  const darkColor = `${color}Dark`;

  const classic = {
    light: {
      default: `bg-${color}-9 border border-solid border-${color}-9 shadow-button-classic`,
      hover: `hover:bg-${color}-10 hover:border-${color}-9`,
      active: `active:bg-${color}-9 active:border-${color}-9`,
      disable: `disabled:bg-slateA-3 disabled:border-slate-4 disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-${darkColor}-9 dark:border-${darkColor}-9 dark:shadow-button-dark-classic`,
      hover: `dark:hover:bg-${darkColor}-10 dark:hover:border-${darkColor}-9`,
      active: `dark:active:bg-${darkColor}-9 dark:active:border-${darkColor}-9`,
      disable: `dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8`
    }
  };

  const solid = {
    light: {
      default: `bg-${color}-9 border-none`,
      hover: `hover:bg-${color}-10 hover:border-none`,
      active: `active:bg-${color}-10 active:border-none active:opacity-[.92]`,
      disable: `disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-${darkColor}-9`,
      hover: `dark:hover:bg-${darkColor}-10`,
      active: `dark:active:bg-${darkColor}-10 dark:active:opacity-[.92]`,
      disable: `dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8`
    }
  };

  const soft = {
    light: {
      default: `bg-${color}A-3 border-none text-${color}A-11`,
      hover: `hover:bg-${color}A-4 hover:border-none hover:text-${color}A-11`,
      active: `active:bg-${color}A-5 active:border-none active:text-${color}A-11 active:opacity-[.92]`,
      disable: `disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-${darkColor}A-3 dark:text-${darkColor}A-11`,
      hover: `dark:hover:bg-${darkColor}A-4 dark:hover:text-${darkColor}A-11`,
      active: `dark:active:bg-${darkColor}A-5 dark:active:text-${darkColor}A-11 dark:active:opacity-[.92]`,
      disable: `dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8`
    }
  };

  const surface = {
    light: {
      default: `bg-${color}A-2 border border-solid border-${color}A-7 text-${color}A-11`,
      hover: `hover:bg-${color}A-2 hover:border-${color}A-8 hover:text-${color}A-11`,
      active: `active:bg-${color}A-3 active:border-${color}A-8 active:text-${color}A-11 active:opacity-[.92]`,
      disable: `disabled:bg-slateA-2 disabled:border-slateA-6 disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-${darkColor}A-2 dark:border-${darkColor}A-7 dark:text-${darkColor}A-11`,
      hover: `dark:hover:bg-${darkColor}A-2 dark:hover:border-${darkColor}A-8 dark:hover:text-${darkColor}A-11`,
      active: `dark:active:bg-${darkColor}A-3 dark:active:border-${darkColor}A-8 dark:active:text-${darkColor}A-11 dark:active:opacity-[.92]`,
      disable: `dark:disabled:bg-slateDarkA-2 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8`
    }
  };

  const outline = {
    light: {
      default: `bg-transparent border border-solid border-${color}A-8 text-${color}A-11`,
      hover: `hover:bg-${color}A-2 hover:border-${color}A-8 hover:text-${color}A-11`,
      active: `active:bg-${color}A-3 active:border-${color}A-8 active:text-${color}A-11`,
      disable: `disabled:bg-transparent disabled:border-slateA-7 disabled:text-slateA-8`
    },
    dark: {
      default: `dark:border-${darkColor}A-8 dark:bg-transparent dark:text-${darkColor}A-11`,
      hover: `dark:hover:bg-${darkColor}A-2 dark:hover:border-${darkColor}A-8 dark:hover:text-${darkColor}A-11`,
      active: `dark:active:bg-${darkColor}A-3 dark:active:border-${darkColor}A-8 dark:active:text-${darkColor}A-11 dark:active:opacity-[.92]`,
      disable: `dark:disabled:border-slateDarkA-7 dark:disabled:bg-transparent dark:disabled:text-slateDarkA-8 `
    }
  };

  const ghost = {
    light: {
      default: `bg-transparent border-none text-${color}A-11`,
      hover: `hover:bg-${color}A-3 hover:border-none hover:text-${color}A-11`,
      active: `active:bg-${color}A-4 active:border-none active:text-${color}A-11 active:opacity-[.92]`,
      disable: `disabled:bg-transparent disabled:border-none disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-transparent dark:text-${darkColor}A-11`,
      hover: `dark:hover:bg-${darkColor}A-3 dark:hover:text-${darkColor}A-11`,
      active: `dark:active:bg-${darkColor}A-4 dark:active:text-${darkColor}A-11 dark:active:opacity-[.92]`,
      disable: `dark:disabled:text-slateDarkA-8`
    }
  };

  switch (type) {
    case 'classic':
      return makeClassName(classic, isClickable);
    case 'solid':
      return makeClassName(solid, isClickable);
    case 'soft':
      return makeClassName(soft, isClickable);
    case 'surface':
      return makeClassName(surface, isClickable);
    case 'outline':
      return makeClassName(outline, isClickable);
    case 'ghost':
      return makeClassName(ghost, isClickable);
    default:
      return '';
  }
};

export const toggleAppearanceStyle = (
  type: string,
  color: string,
  isClickable: boolean = true,
  stateOn: string = ''
) => {
  const darkColor = `${color}Dark`;
  const classic = {
    light: {
      default: `bg-${color}-9 border border-solid border-${color}-9 text-white shadow-button-classic`,
      hover: `hover:bg-${color}-10 hover:border-${color}-9 hover:text-white ${stateOn}hover:bg-${color}-10 ${stateOn}hover:border-${color}-9 ${stateOn}hover:text-white`,
      active: `${stateOn}bg-${color}-9 ${stateOn}border-${color}-9 ${stateOn}text-white`,
      disable: `disabled:bg-slateA-3 disabled:border-slate-4 disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-${darkColor}-9 dark:border-${darkColor}-9 dark:text-slateDark-1`,
      hover: `dark:hover:bg-${darkColor}-10 dark:hover:border-${darkColor}-9 dark:hover:text-slateDark-1 ${stateOn}dark:hover:bg-${darkColor}-10 ${stateOn}dark:hover:border-${darkColor}-9 ${stateOn}dark:hover:text-slateDark-1`,
      active: `dark:${stateOn}bg-${darkColor}-9 dark:${stateOn}border-${darkColor}-9 dark:${stateOn}text-slateDark-1`,
      disable: `dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8`
    }
  };

  const solid = {
    light: {
      default: `bg-${color}-9 border-none text-white`,
      hover: `hover:bg-${color}-10 hover:border-none hover:text-white ${stateOn}hover:bg-${color}-10 ${stateOn}hover:border-none ${stateOn}hover:text-white`,
      active: `${stateOn}bg-${color}-10 ${stateOn}border-none ${stateOn}text-white ${stateOn}opacity-[.92]`,
      disable: `disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-${darkColor}-9 dark:text-slateDark-1`,
      hover: `dark:hover:bg-${darkColor}-10 dark:hover:text-slateDark-1 ${stateOn}dark:hover:bg-${darkColor}-10 ${stateOn}dark:hover:text-slateDark-1`,
      active: `dark:${stateOn}bg-${darkColor}-10 dark:${stateOn}text-slateDark-1 dark:${stateOn}opacity-[.92]`,
      disable: `dark:disabled:bg-slateDarkA-3 disabled:text-slateDarkA-8`
    }
  };

  const soft = {
    light: {
      default: `bg-${color}A-3 border-none text-${color}A-11`,
      hover: `hover:bg-${color}A-4 hover:border-none hover:text-${color}A-11 ${stateOn}hover:bg-${color}A-4 ${stateOn}hover:border-none ${stateOn}hover:text-${color}A-11`,
      active: `${stateOn}bg-${color}A-5 ${stateOn}border-none ${stateOn}text-${color}A-11 ${stateOn}opacity-[.92]`,
      disable: `disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-${darkColor}A-3 dark:text-${darkColor}A-11`,
      hover: `dark:hover:bg-${darkColor}A-4 dark:hover:text-${darkColor}A-11 ${stateOn}dark:hover:bg-${darkColor}A-4 ${stateOn}dark:hover:text-${darkColor}A-11`,
      active: `dark:${stateOn}bg-${darkColor}A-5 dark:${stateOn}text-${darkColor}A-11 dark:${stateOn}opacity-[.92]`,
      disable: `dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8`
    }
  };

  const surface = {
    light: {
      default: `bg-${color}A-2 border border-solid border-${color}A-7 text-${color}A-11`,
      hover: `hover:bg-${color}A-2 hover:border-${color}A-8 hover:text-${color}A-11 ${stateOn}hover:bg-${color}A-2 ${stateOn}hover:border-${color}A-8 ${stateOn}hover:text-${color}A-11`,
      active: `${stateOn}bg-${color}A-3 ${stateOn}border-${color}A-8 ${stateOn}text-${color}A-11 ${stateOn}opacity-[.92]`,
      disable: `disabled:bg-slatDarkeA-2 disabled:border-slateDarkA-6 disabled:text-slateDarkA-8`
    },
    dark: {
      default: `dark:bg-${darkColor}A-2 dark:border-${darkColor}A-7 dark:text-${darkColor}A-11`,
      hover: `dark:hover:bg-${darkColor}A-2 dark:hover:border-${darkColor}A-8 dark:hover:text-${darkColor}A-11 ${stateOn}dark:hover:bg-${darkColor}A-2 ${stateOn}dark:hover:border-${darkColor}A-8 ${stateOn}dark:hover:text-${darkColor}A-11`,
      active: `dark:${stateOn}bg-${darkColor}A-3 dark:${stateOn}border-${darkColor}A-8 dark:${stateOn}text-${darkColor}A-11 dark:${stateOn}opacity-[.92]`,
      disable: `dark:disabled:bg-slateDarkA-2 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8`
    }
  };

  const outline = {
    light: {
      default: `bg-transparent border border-solid border-${color}A-8 text-${color}A-11`,
      hover: `hover:bg-${color}A-2 hover:border-${color}A-8 hover:text-${color}A-11 ${stateOn}hover:bg-${color}A-2 ${stateOn}hover:border-${color}A-8 ${stateOn}hover:text-${color}A-11`,
      active: `${stateOn}bg-${color}A-3 ${stateOn}border-${color}A-8 ${stateOn}text-${color}A-11`,
      disable: `disabled:bg-transparent disabled:border-slateA-7 disabled:text-slateA-8`
    },
    dark: {
      default: `dark:border-${darkColor}A-8 dark:text-${darkColor}A-11`,
      hover: `dark:hover:bg-${darkColor}A-2 dark:hover:border-${darkColor}A-8 dark:hover:text-${darkColor}A-11 ${stateOn}dark:hover:bg-${darkColor}A-2 ${stateOn}dark:hover:border-${darkColor}A-8 ${stateOn}dark:hover:text-${darkColor}A-11`,
      active: `dark:${stateOn}bg-${darkColor}A-3 dark:${stateOn}border-${darkColor}A-8 dark:${stateOn}text-${darkColor}A-11 dark:${stateOn}opacity-[.92]`,
      disable: `dark:disabled:border-slateDarkA-7 dark:disabled:text-slateDarkA-8`
    }
  };

  const ghost = {
    light: {
      default: `bg-transparent border-none text-${color}A-11`,
      hover: `hover:bg-${color}A-3 hover:border-none hover:text-${color}A-11 ${stateOn}hover:bg-${color}A-3 ${stateOn}hover:border-none ${stateOn}hover:text-${color}A-11`,
      active: `${stateOn}bg-${color}A-4 ${stateOn}border-none ${stateOn}text-${color}A-11 ${stateOn}opacity-[.92]`,
      disable: `disabled:bg-transparent disabled:border-none disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-transparent dark:text-${darkColor}A-11`,
      hover: `dark:hover:bg-${darkColor}A-3 dark:hover:text-${darkColor}A-11 ${stateOn}dark:hover:bg-${darkColor}A-3 ${stateOn}dark:hover:text-${darkColor}A-11`,
      active: `dark:${stateOn}bg-${darkColor}A-4 dark:${stateOn}text-${darkColor}A-11 dark:${stateOn}opacity-[.92]`,
      disable: `dark:disabled:text-slateDarkA-8`
    }
  };

  switch (type) {
    case 'classic':
      return makeClassName(classic, isClickable);
    case 'solid':
      return makeClassName(solid, isClickable);
    case 'soft':
      return makeClassName(soft, isClickable);
    case 'surface':
      return makeClassName(surface, isClickable);
    case 'outline':
      return makeClassName(outline, isClickable);
    case 'ghost':
      return makeClassName(ghost, isClickable);
    default:
      return '';
  }
};

export const menuItemAppearanceStyle = (type: 'solid' | 'soft' | 'ghost', color: string) => {
  let appearanceStyle = '';
  if (type === 'solid') {
    appearanceStyle = `hover:bg-${color}-9 dark:hover:bg-${color}Dark-9 `;
    appearanceStyle += blackText.includes(color)
      ? `hover:text-slateA-11 dark:hover:text-white`
      : `hover:text-white dark:hover:text-white`;
  }
  if (type === 'soft') {
    appearanceStyle = `hover:bg-${color}A-4 dark:hover-bg-${color}DarkA-4`;
  }
  if (type === 'ghost') {
    appearanceStyle = `hover:bg-${color}-3 dark:hover:bg-${color}Dark-3`;
  }
  return appearanceStyle;
};

export const sliderTrackAppearanceStyle = (type: 'surface' | 'soft' | 'classic') => {
  if (type === 'surface') return 'border border-[#e5e7eb] bg-slateA-3';
  if (type === 'soft') return 'bg-slateA-3';
  if (type === 'classic') return ' bg-slateA-3 shadow-slider-classic';
  return '';
};
export const sliderRangeAppearanceStyle = (type: 'surface' | 'soft' | 'classic', color: string) => {
  if (type === 'surface') return `bg-${color}A-10 dark:bg-${color}DarkA-10  top-[-1px]`;
  if (type === 'soft') return `bg-${color}A-5 dark:bg-${color}DarkA-5 `;
  if (type === 'classic') return `bg-${color}A-10 dark:bg-${color}DarkA-10`;
  return '';
};
export const radioCheckedApperanceStyle = (type: string, color: string) => {
  let classicStyle = `data-[state=checked]:bg-${color}-9 data-[state=checked]:bg-[linear-gradient(to_bottom,_#ffffff26,_transparent,_#00000026)] data-[state=checked]:shadow-radio-classic-checked data-[state=unchecked]:bg-[rgba(0, 0, 0, 0.25)] data-[state=unchecked]:shadow-radio-classic-unchecked`;
  let softStyle = `bg-${color}A-4`;
  let surfaceStyle = `data-[state=checked]:bg-${color}-9 data-[state=unchecked]:bg-[rgba(0, 0, 0, 0.25)] data-[state=unchecked]:shadow-radio-surface`;

  switch (type) {
    case 'classic':
      return classicStyle;
    case 'soft':
      return softStyle;
    case 'surface':
      return surfaceStyle;
    default:
      return '';
  }
};

export const switchCheckedApperanceStyle = (type: string, color: string) => {
  let classicStyle = `data-[state=checked]:bg-${color}-9 inset-shadow-sm border border-solid data-[state=checked]:border-${color}-9  shadow-custom-1 data-[state=unchecked]:border-slate-5 data-[state=unchecked]:bg-slateA-4 data-[state=unchecked]:text-slateA-9`;
  let softStyle = `data-[state=checked]:bg-${color}-7 border  data-[state=checked]:border-${color}A-7 data-[state=unchecked]:bg-slateA-2 data-[state=unchecked]:bg-slateA-6 `;
  let surfaceStyle = `data-[state=checked]:bg-${color}-9 text-white border border-solid data-[state=checked]:border-${color}-9 shadow-custom-1 shadow-custom-2 shadow-custom-3 data-[state=unchecked]:border-slate-4 data-[state=unchecked]:bg-slateA-3 data-[state=unchecked]:text-slateA-8`;

  switch (type) {
    case 'classic':
      return classicStyle;
    case 'soft':
      return softStyle;
    case 'surface':
      return surfaceStyle;
    default:
      return '';
  }
};

export const checkboxAppearanceStyle = (type: string, color: string, indeterminate: boolean) => {
  const darkColor = `${color}Dark`;
  const surface = {
    light: {
      default: `border data-[state=unchecked]:bg-transparent data-[state=unchecked]:border-slateA-7
        data-[state=checked]:bg-${color}-9 data-[state=checked]:border-none data-[state=checked]:text-slate-1`,
      hover: `hover:data-[state=unchecked]:bg-transparent hover:data-[state=unchecked]:border-slateA-8
        hover:data-[state=checked]:bg-${color}-10 hover:data-[state=checked]:border-none hover:data-[state=checked]:text-white`,
      active: `active:data-[state=unchecked]:bg-transparent active:data-[state=unchecked]:border-slateA-9
        active:data-[state=checked]:bg-${color}-10 active:data-[state=checked]:border-none active:data-[state=checked]:text-white`,
      disable: `disabled:data-[state=unchecked]:bg-slateA-3 disabled:data-[state=unchecked]:border-slateA-6
        disabled:data-[state=checked]:bg-slateA-3 disabled:data-[state=checked]:border-slateA-6 disabled:data-[state=checked]:text-slateA-8`
    },
    dark: {
      default: `dark:data-[state=unchecked]:border-slateDarkA-7
        dark:data-[state=checked]:bg-${darkColor}-9 dark:data-[state=checked]:text-#111113`,
      hover: `dark:hover:data-[state=unchecked]:border-slateDarkA-8
        dark:hover:data-[state=checked]:bg-${darkColor}-10 dark:hover:data-[state=checked]:text-#111113`,
      active: `dark:active:data-[state=unchecked]:border-slateDarkA-9
        dark:active:data-[state=checked]:bg-${darkColor}-10 dark:active:data-[state=checked]:text-#111113`,
      disable: `dark:disabled:data-[state=unchecked]:bg-slateDarkA-3 dark:disabled:data-[state=unchecked]:border-slateDarkA-6
        dark:disabled:data-[state=checked]:bg-slateDarkA-3 dark:disabled:data-[state=checked]:border-slateDarkA-6 dark:disabled:data-[state=checked]:text-slateDarkA-8`
    }
  };

  const soft = {
    light: {
      default: `data-[state=unchecked]:bg-${color}A-5 data-[state=unchecked]:border-none
        data-[state=checked]:bg-${color}A-5 data-[state=checked]:border-none data-[state=checked]:text-${color}-11`,
      hover: `hover:data-[state=unchecked]:bg-${color}A-6 hover:data-[state=unchecked]:border-none
        hover:data-[state=checked]:bg-${color}A-6 hover:data-[state=checked]:border-none hover:data-[state=checked]:text-${color}-11`,
      active: `active:data-[state=unchecked]:bg-${color}A-7 active:data-[state=unchecked]:border-none
        active:data-[state=checked]:bg-${color}A-7 active:data-[state=checked]:border-none active:data-[state=checked]:text-${color}-11`,
      disable: `disabled:data-[state=unchecked]:bg-slateA-3 disabled:data-[state=unchecked]:border-none
        disabled:data-[state=checked]:bg-slateA-3 disabled:data-[state=checked]:border-none disabled:data-[state=checked]:text-slateA-8`
    },
    dark: {
      default: `dark:data-[state=unchecked]:bg-${darkColor}A-5
        dark:data-[state=checked]:bg-${darkColor}A-5 dark:data-[state=checked]:text-${darkColor}-11`,
      hover: `dark:hover:data-[state=unchecked]:bg-${darkColor}A-6
        dark:hover:data-[state=checked]:bg-${darkColor}A-6 dark:hover:data-[state=checked]:text-${darkColor}-11`,
      active: `dark:active:data-[state=unchecked]:bg-${darkColor}A-7
        dark:active:data-[state=checked]:bg-${darkColor}A-7 dark:active:data-[state=checked]:text-${darkColor}-11`,
      disable: `dark:disabled:data-[state=unchecked]:bg-slateDarkA-3
        dark:disabled:data-[state=checked]:bg-slateDarkA-3 dark:disabled:data-[state=checked]:text-slateDarkA-8`
    }
  };

  const indeterminateSurface = {
    light: {
      default: `border bg-${color}A-2 border-${color}A-7 text-${color}A-11`,
      hover: `hover:bg-${color}A-2 hover:border-${color}A-8 hover:text-${color}A-11`,
      active: `active:bg-${color}A-3 active:border-${color}A-8 active:text-${color}A-11`,
      disable: `disabled:bg-slateA-3 disabled:border-slateA-6 disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-${darkColor}A-2 dark:border-${darkColor}A-7 dark:text-${darkColor}A-11`,
      hover: `dark:hover:bg-${darkColor}A-2 dark:hover:border-${darkColor}A-8 dark:hover:text-${darkColor}A-11`,
      active: `dark:active:bg-${darkColor}A-3 dark:active:border-${darkColor}A-8 dark:active:text-${darkColor}A-11`,
      disable: `dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8`
    }
  };

  const indeterminateSoft = {
    light: {
      default: `border bg-transparent border-${color}A-6 text-${color}A-11`,
      hover: `hover:bg-transparent hover:border-${color}A-6 hover:text-${color}A-11`,
      active: `active:bg-transparent active:border-${color}A-6 active:text-${color}A-11`,
      disable: `disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8`
    },
    dark: {
      default: `dark:border-${darkColor}A-6 dark:text-${darkColor}A-11`,
      hover: `dark:hover:border-${darkColor}A-6 dark:hover:text-${darkColor}A-11`,
      active: `dark:active:border-${darkColor}A-6 dark:active:text-${darkColor}A-11`,
      disable: `dark:disabled:bg-slateDarkA-3 dark:disabled:text-slateDarkA-8`
    }
  };

  switch (type) {
    case 'classic':
      return indeterminate
        ? makeClassName(indeterminateSurface, true)
        : `${makeClassName(surface, true)} data-[state=checked]:shadow-checkbox-classic data-[state=unchecked]:shadow-checkbox-classic
          dark:data-[state=checked]:shadow-checkbox-classic dark:data-[state=unchecked]:shadow-checkbox-classic`;
    case 'soft':
      return indeterminate ? makeClassName(indeterminateSoft, true) : makeClassName(soft, true);
    case 'surface':
      return indeterminate
        ? makeClassName(indeterminateSurface, true)
        : makeClassName(surface, true);
    default:
      return makeClassName(surface, true);
  }
};

export const selectAppearanceStyle = (
  type: 'classic' | 'surface' | 'soft' | 'ghost',
  color: string
) => {
  const darkColor = `${color}Dark`;

  const surface = {
    light: {
      default: `bg-[#FFFFFF] border border-slateA-7 data-placeholder:text-slateA-10 text-slateA-12`,
      hover: `hover:bg-[#FFFFFF] hover:border hover:border-slateA-8 hover:text-slateA-10`,
      active: `active:bg-${color}A-3 active:border-${color}A-8 active:text-slateA-10 active:opacity-[.92]`,
      disable: `disabled:bg-slateA-2 disabled:border-slateA-6 disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-[#111113] dark:border dark:data-placeholder:border-slateDarkA-7 dark:data-placeholder:text-slateDarkA-9 dark:border-slateDarkA-7 dark:text-slateDarkA-12`,
      hover: `dark:hover:bg-[#111113] dark:hover:border dark:hover:border-slateDarkA-8 dark:hover:text-slateDarkA-10`,
      active: `dark:active:bg-${darkColor}A-3 dark:active:border dark:active:border-${darkColor}A-8 dark:active:text-slateDarkA-10 dark:active:opacity-[.92]`,
      disable: `dark:disabled:bg-slateDarkA-2 dark:disabled:border dark:disabled:border-slateDarkA-6 dark:disabled:text-slateDarkA-8`
    }
  };

  const classic = {
    light: {
      default: `bg-slateA-2 border border-slate-4 data-placeholder:text-slateA-10 text-slateA-12`,
      hover: `hover:bg-slateA-3 hover:border hover:border-slate-4 hover:text-slateA-10`,
      active: `active:bg-slateA-4 active:border active:border-slate-6 active:text-slateA-10`,
      disable: `disabled:bg-slateA-3 disabled:border disabled:border-slate-4 disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-slateDarkA-2 dark:border-slateDark-4 dark:data-placeholder:text-slateDarkA-10 dark:text-slateDarkA-12`,
      hover: `dark:hover:bg-slateDarkA-3 dark:hover:border-slateDark-4 dark:hover:text-slateDarkA-10`,
      active: `dark:active:bg-slateDarkA-4 dark:active:border-slateDark-6 dark:active:text-slateDarkA-10`,
      disable: `dark:disabled:bg-slateDarkA-3 dark:disabled:border-slateDark-4 dark:disabled:text-slateDarkA-8`
    }
  };

  const soft = {
    light: {
      default: `bg-${color}A-3 border-none data-placeholder:text-${color}A-12/[.5] text-${color}A-12`,
      hover: `hover:bg-${color}A-4 hover:border-none hover:text-${color}A-12/[.5]`,
      active: `active:bg-${color}A-5 active:border-none active:text-${color}A-12/[.5] active:opacity-[.92]`,
      disable: `disabled:bg-slateA-3 disabled:border-none disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-${darkColor}A-3 dark:border-none dark:data-placeholder:text-${darkColor}A-12/[.5] dark:text-${darkColor}A-12 `,
      hover: `dark:hover:bg-${darkColor}A-4 dark:hover:border-none dark:hover:text-${darkColor}A-12/[.5]`,
      active: `dark:active:bg-${darkColor}A-5 dark:active:border-none dark:active:text-${darkColor}A-12/[.5] dark:active:opacity-[.92]`,
      disable: `dark:disabled:bg-slateDarkA-3 dark:disabled:border-none dark:disabled:text-slateDarkA-8`
    }
  };

  const ghost = {
    light: {
      default: `bg-transparent border-none data-placeholder:text-${color}A-12/[.5] text-${color}A-12`,
      hover: `hover:bg-${color}A-3 hover:border-none hover:text-${color}A-1/[.5]`,
      active: `active:bg-${color}A-4 active:border-none active:text-${color}A-12/[.5] active:opacity-[.92]`,
      disable: `disabled:bg-transparent disabled:border-none disabled:text-slateA-8`
    },
    dark: {
      default: `dark:bg-transparent dark:border-none dark:data-placeholder:text-${darkColor}A-12/[.5] dark:text-${darkColor}A-12`,
      hover: `dark:hover:bg-${darkColor}A-3 dark:hover:border-none dark:hover:text-${darkColor}A-12/[.5]`,
      active: `dark:active:bg-${darkColor}A-4 dark:active:border-none dark:active:text-${darkColor}A-12/[.5] dark:active:opacity-[.92]`,
      disable: `dark:disabled:text-slateDarkA-8 dark:disabled:border-none`
    }
  };

  const makeClassName = (type: {
    light: { default: string; hover: string; active: string; disable: string };
    dark: { default: string; hover: string; active: string; disable: string };
  }) => {
    let className = '';
    className += `${type.light.default} ${type.dark.default}  ${type.light.hover} ${type.light.active} ${type.light.disable} ${type.dark.hover} ${type.dark.active} ${type.dark.disable}`;

    return className;
  };

  switch (type) {
    case 'classic':
      return makeClassName(classic);
    case 'soft':
      return makeClassName(soft);
    case 'surface':
      return makeClassName(surface);
    case 'ghost':
      return makeClassName(ghost);
    default:
      return '';
  }
};