import React, { type FC, type HTMLAttributes } from 'react';
import classNames from 'clsx';
import { DaisyTheme } from './DaisyTheme';
import { getSupportedThemes } from './getSupportedThemes';
import { ThemePreviewCard } from './ThemePreviewCard';

export const ThemeListSelector: FC<HTMLAttributes<HTMLDivElement>> = ({ className, style, ...props }) => {
  const [state, update] = DaisyTheme.useThemeState();
  const { theme } = state;
  const setTheme = (v: string) => {
    update({ theme: v });
  };

  return (
    <div className={classNames('flex flex-wrap gap-1 p-2', className)} style={style} {...props}>
      {getSupportedThemes().map((v) => (
        <div
          key={v.value}
          onClick={() => {
            setTheme(v.value);
          }}
          className={classNames(
            'cursor-pointer rounded border p-1',
            'hover:border-info',
            theme === v.value ? 'border-primary' : 'border-transparent',
          )}
        >
          <div data-theme={v.value} className={'overflow-hidden rounded'}>
            <ThemePreviewCard title={v.label} />
          </div>
        </div>
      ))}
    </div>
  );
};