import { observer } from 'mobx-react';
import { TbColorPicker } from 'react-icons/tb';
import { css } from 'glamor';
import { useApphouse } from '../context/useApphouse';
import { merge } from '../utils/obj/merge';
import React, { CSSProperties } from 'react';
import { ApphouseComponent } from './component.interfaces';
import ColorUtils from '../themes/utils/color.utils';

export interface ColorPickerButtonStyles {
  container?: CSSProperties;
  input?: CSSProperties;
  icon?: CSSProperties;
}

export interface ColorPickerButtonProps
  extends ApphouseComponent<ColorPickerButtonStyles> {
  /**
   * Unique id for the color picker button
   */
  id: string;
  /**
   * If you want to modify the color picker icon
   * @default TbColorPicker
   */
  icon?: React.ReactNode;
  /**
   * Current color in rgba format
   * @optional
   */
  value?: string;
  /**
   * callback when color is changed
   */
  onChange: (rgbaStr: string) => void;
  /**
   * List of colors to show in the color picker
   * @optional
   */
  colorPresets?: string[];
  /**
   * If true, use will be able to pick a gradient color
   * @default false
   * @optional
   */
  allowGradient?: boolean;
  size?: 'm';
}
/**
 * A component that renders a color picker button
 */
export const ColorPickerButton: React.FC<ColorPickerButtonProps> = observer(
  (props) => {
    const { id, value, icon, size = 'm', onChange, styleOverwrites } = props;

    const { theme } = useApphouse();
    const [color, setColor] = React.useState(value);
    const { tokens } = theme;
    const _size = '40px';

    const updateColor = (c: string) => {
      setColor(c);
      onChange(c);
    };

    const localStyles = merge(
      {},

      {
        container: {
          position: 'relative',
          width: _size,
          height: _size
        },
        input: {
          '-webkit-appearance': 'none',
          position: 'relative',
          width: '100%',
          height: '100%',
          border: 0,
          borderRadius: '50%',
          background: value,
          padding: tokens.spacings[size],
          overflow: 'hidden',
          boxShadow: 0,
          '::-webkit-color-swatch-wrapper': {
            padding: 0
          },
          '::-webkit-color-swatch': {
            borderRadius: '50%'
          }
        },
        icon: {
          position: 'absolute',
          top: 0,
          left: 0,
          pointerEvents: 'none',
          color: ColorUtils.getColorForeground(value),
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          justifyContent: 'center'
        }
      },
      styleOverwrites
    );
    return (
      <div
        id={id}
        {...css(localStyles.container)}
        data-xray="ColorPickerButton"
      >
        <input
          type="color"
          value={color}
          onChange={(e) => {
            updateColor(e.target.value);
          }}
          {...css(localStyles.input)}
        />
        <span
          {...css(localStyles.icon)}
          onClick={(e) => {
            e.preventDefault();
          }}
        >
          {!icon ? <TbColorPicker size={tokens.iconSize[size]} /> : icon}
        </span>
      </div>
    );
  }
);