import React from "react";
import { Button as AntdButton } from "antd";
import styled from "styled-components";
import { SyncOutlined } from "@ant-design/icons";

const StyledButton = styled(AntdButton)`
  && {
    border: ${(props) =>
      props.type === "dashed" ? "1px dashed #c4c4cf" : "auto"};
    padding: 0 15px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    box-shadow: ${(props) => props.theme?.boxShadowBase};
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: ${(props) => props.theme?.fontFamily};
  }

  ${(props) =>
    props.type === "success"
      ? `
  & {
    background-color: ${props.theme?.antdToken?.colorSuccess};
    color: ${props.theme?.antdToken?.colorTextSecondary};
  }
  `
      : props.type === "action"
      ? `
  &.ant-btn-action {
    background-color: ${props.theme?.antdToken?.colorAction} !important;
    color: #ffffff !important;
  }

  /* Ghost mode for action */
  &.ant-btn-background-ghost {
    background-color: transparent !important;
    color: #000000 !important;
    border: 1px solid ${props.theme?.antdToken?.colorAction} !important;
  }

  /* Disabled style for action */
  &.ant-btn-disabled,
  &:disabled {
    background-color: #f5f5f5 !important;
    color: rgba(0, 0, 0, 0.25) !important;
    border-color: #d9d9d9 !important;
    cursor: not-allowed;
    box-shadow: none;
  }
  `
      : props.type === "default" &&
        `
&.ant-btn-default {
    background-color: #ffffff !important;
    color: #000000 !important;
}
`}
`;

const Button = (props) => {
  const {
    variant = "primary",
    children,
    disabled,
    className,
    danger,
    inputRef,
    ...rest
  } = props;

  const buttonTypeMap = {
    primary: "primary",
    secondary: "default",
    danger: "primary",
    dashed: "dashed",
    text: "text",
    link: "link",
    success: "success",
    action: "action",
  };

  if (variant === "refresh") {
    return (
      <StyledButton
        type="default"
        icon={<SyncOutlined />}
        className={className}
        disabled={disabled}
        ref={inputRef}
        {...rest}
      >
        {children}
      </StyledButton>
    );
  }

  return (
    <StyledButton
      type={buttonTypeMap[variant]}
      danger={variant === "danger"}
      className={className}
      disabled={disabled}
      ref={inputRef}
      {...rest}
    >
      {children}
    </StyledButton>
  );
};

export default Button;