import styled from "styled-components";
import React from "react";
import { primaryColor } from "../../config";
import { sizeStyle, fontStyle } from "../generator";
import { designStyle, elementProps } from "../generator";
import "../main.scss";
import Loader from "../loader";

const Bt = styled.button<{ props: any; fontProps: any }>`
  ${(props: any) => designStyle(props)}
  ${(props) => sizeStyle(props)}
  ${(fontProps) => fontStyle(fontProps, false)}
  ${({ bg, invert, disabled, color, noBorder, noHover }: any) => `
  background:  ${bg || primaryColor};
  border: 2px solid ${noBorder ? 'white' : bg || primaryColor};
  color : ${ bg ? "white" : color || "white"};
  cursor: pointer;
  box-shadow: 0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12);
  ${invert ? `background: white; color: ${primaryColor};` : ''}
  ${bg && invert ? `background: white; color: ${bg !== "white" ? bg : primaryColor};` : ''}
  ${!disabled ? `
    &:hover {
      ${!noHover ? `
        border-color: ${bg || primaryColor};
        background: ${!invert ? color || "white" : bg || primaryColor};
        color: ${bg ? (invert ? "white" : bg) : !invert ? primaryColor : color || "white"};` : ''}
      box-shadow: 0 0 0 0;
      transform: scale(0.99);
      transition: 350ms ease-out;
  }`
      : "background: #F0F3F4; border-color: #F0F3F4; color: darkgray;"
    }

&:focus{
    outline:0;
}`}`;

export const Button = (props: any) => {
  let {
    onSubmit,
    children,
    margin = '0.15em',
    padding = '0.3em 0.4em',
    minWidth = '6.5em',
    disabled,
    loading = false,
    noHover = false,
    tooltip
  } = props;


  const { color, size, bold, textAlign, placeSelf, textShadow, noBorder = false, faIcon } = props;
  const fontProps = { color, size, bold, textAlign, placeSelf, textShadow };

  props = { ...props, ...{ margin, padding, minWidth, noHover } }

  return (
    <Bt
      type={props.type || "submit"}
      {...props}
      fontProps={fontProps}
      disabled={disabled}
      onSubmit={onSubmit}
      {...elementProps(props)}
    >
      {loading && (
        <>
          <Loader.Spinner size={4} />
          &nbsp;
        </>
      )}
      {faIcon && <i className={faIcon}></i>}
      {children}
    </Bt>
  );
};
Button.Normal = styled.button`
  padding: 0.3rem;
  color: white;
  cursor: pointer;
  background: ${primaryColor};
  border: 0.15em solid ${primaryColor};
  border-radius: 0.25em;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), 0 3px 3px rgba(0, 0, 0, 0.22);
  &:focus {
    outline: 0;
  }
  ${(props) =>
    !props.disabled
      ? `&:hover {
    background: white;
    color: ${primaryColor};
    box-shadow: 0 0 0 0;
    transform: scale(0.99);
    transition: 350ms ease-out;
}`
      : "background: #F0F3F4; border-color: #F0F3F4; color: darkgray; box-shadow: 0 0 0 !important;"}
`;
export default Button;