import * as React from "react";
import { ColorPicker } from "@sc/modules/page/Builder/Properties";
import { Tabs, Tab } from "@material-ui/core";

export interface ColorPickerSectionProps {
  updateComponentSettings: (
    id: string,
    properties: any,
    dbUpdate?: boolean,
    foreUpdate?: number
  ) => any;
  updateComponentStyle: (
    id: string,
    properties: any,
    dbUpdate?: boolean,
    foreUpdate?: number
  ) => any;
  settings: any;
}

export const ColorPickerSection: React.FC<ColorPickerSectionProps> = ({
  updateComponentSettings,
  updateComponentStyle,
  settings,
}) => {
  const [value, setValue] = React.useState<string>(0);
  const switchTab = (event: React.ChangeEvent<{}>, newValue: number) => {
    setValue(newValue);
  };
  return (
    <div>
      <Tabs value={value} onChange={switchTab}>
        <Tab label="Normal" value={0} />
        <Tab label="Hovered" value={1} />
      </Tabs>
      <div style={{ padding: 10 }}>
        {value === 0 && (
          <ColorPicker
            onChange={(e) =>
              updateComponentStyle(
                settings.id,
                { backgroundColor: e.hex },
                true,
                0
              )
            }
          />
        )}

        {value === 1 && (
          <ColorPicker
            onChange={(e) =>
              updateComponentSettings(
                settings.id,
                {
                  ...settings,
                  hoverStyle: {
                    ...settings.hoverStyle,
                    backgroundColor: e.hex,
                  },
                },
                true,
                0
              )
            }
          />
        )}
      </div>
    </div>
  );
};