import React, { useCallback, useState } from "react";

import classNames from "classnames";
import compose from "ramda/src/compose";

import Spottable from "@enact/spotlight/Spottable";
import { Marquee, MarqueeController } from "@enact/ui/Marquee";

import css from "./TButton.module.less";

const SIZES = {
  small: "small",
  large: "large",
  full: "full",
};

const TYPES = {
  normal: "normal",
  // withIcon: "withIcon", // 추후 추가 예정
  terms: "terms",
  agree: "agree",
  popup: "popup",
};

const COLOR = {
  basic: "basic",
  white: "white",
  gray: "gray",
}; // white: default color

const SpottableComponent = Spottable("div");

function TButtonBase({
  children,
  spotlightId,
  className,
  onClick,
  onBlur,
  onFocus,
  disabled,
  selected,
  type = "normal",
  color = "basic",
  size = "large",
  withMarquee = false,
  isIntro = false,
  ...rest
}) {
  const [isFocused, setIsFocused] = useState(false);
  const [pressed, setPressed] = useState(false);

  const _onClick = useCallback(
    (e) => {
      if (disabled) {
        e.stopPropagation();
        return;
      }

      setPressed(true);

      if (onClick) {
        onClick(e);
      }
    },
    [onClick, disabled]
  );

  const _onFocus = useCallback(() => {
    setIsFocused(true);

    if (onFocus) {
      onFocus();
    }
  }, [onFocus]);

  const _onBlur = useCallback(() => {
    setIsFocused(false);

    if (onBlur) {
      onBlur();
    }
  }, [onBlur]);

  return (
    <SpottableComponent
      {...rest}
      className={classNames(
        css.tButton,
        css[type],
        css[size],
        css[color],
        isFocused && css.focused,
        selected && css.selected,
        disabled ? css.disabled : null,
        className ? className : null
      )}
      spotlightId={spotlightId}
      onFocus={_onFocus}
      onBlur={_onBlur}
      onClick={_onClick}
    >
      {withMarquee ? (
        <Marquee className={css.marquee} marqueeOn="focus">
          {children}
        </Marquee>
      ) : (
        <div className={css.text}>{children}</div>
      )}
    </SpottableComponent>
  );
}

const ButtonDecorator = compose(MarqueeController({ marqueeOnFocus: true }));
const TButton = ButtonDecorator(TButtonBase);

export default TButton;

export { COLOR, SIZES, TYPES };
