import React from 'react';
import styled from 'styled-components';
import ReactTooltip from 'react-tooltip';

export const IconButton = ({ onclick, svg, className, as }) => {
  return (
    <PrimaryBtn as={as} onClick={onclick} className={`btn ${className}`}>
      <svg>
        <use href={`/images/icons.svg#${svg}`}></use>
      </svg>
    </PrimaryBtn>
  );
};
export const RoundIconButton = ({ onclick, svg }) => {
  return (
    <RoundBtn onClick={onclick} className="btn">
      <svg>
        <use href={`/images/icons.svg#${svg}`}></use>
      </svg>
    </RoundBtn>
  );
};
export const MoreDropButton = ({ onclick, svg, title, color }) => {
  return (
    <DropBtn onClick={onclick} className="btn" color={color}>
      <span>{title}</span>
      <svg>
        <use href={`/images/icons.svg#${svg}`}></use>
      </svg>
    </DropBtn>
  );
};

export const IconTxtButton = ({ onclick, svg, title, extraName }) => {
  return (
    <PrimaryText onClick={onclick} className={`btn ${extraName || ''}`}>
      <svg>
        <use href={`/images/icons.svg#${svg}`}></use>
      </svg>
      <span>{title}</span>
    </PrimaryText>
  );
};

export const TabButton = ({ svg, title, className }) => {
  return (
    <TabBtn className={`btn ${className}`}>
      {svg ? (
        <svg>
          <use href={`/images/icons.svg#${svg}`}></use>
        </svg>
      ) : (
        ''
      )}
      <span>{title}</span>
    </TabBtn>
  );
};

export const FormPageButton = ({
  onclickPage,
  onclickDelete,
  svg,
  title,
  className,
}) => {
  return (
    <DivTabBtn className={`btn ${className}`}>
      <span>
        <ReactTooltip id="delete" />
      </span>
      <span
        onClick={() => onclickPage()}
        style={{ marginRight: '5px', padding: '2px' }}
      >
        {title}
      </span>

      {svg ? (
        <svg
          data-for="delete"
          data-tip="Delete page"
          style={{ marginLeft: '5px', cursor: 'pointer' }}
          onClick={() => onclickDelete()}
        >
          <use href={`/images/icons.svg#${svg}`}></use>
        </svg>
      ) : (
        ''
      )}
    </DivTabBtn>
  );
};
export const FormFieldButton = ({ onclick, svg, title, description }) => {
  return (
    <FormFieldBtn onClick={onclick}>
      <svg>
        <use href={`/images/icons.svg#${svg}`}></use>
      </svg>
      <div className="btn-details">
        <h3>{title}</h3>
        <p>{description}</p>
      </div>
    </FormFieldBtn>
  );
};

export const PrimaryIconButton = ({
  onclick,
  svg,
  title,
  color,
  opt,
  href,
  className,
  ...props
}) => {
  return (
    <PrimaryIconBtn
      as={opt}
      href={href}
      onClick={onclick}
      className={`btn ${className}`}
      color={color}
      {...props}
    >
      <svg>
        <use href={`/images/icons.svg#${svg}`}></use>
      </svg>
      <span>{title}</span>
    </PrimaryIconBtn>
  );
};

const PrimaryBtn = styled.button`
  background-color: transparent;
  padding: 0.8rem;
  color: #61677c;
  svg {
    width: 15px;
    height: 15px;
  }
`;
const RoundBtn = styled.button`
  min-width: 35px;
  max-height: 35px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: ${props => (props.bg ? props.bg : 'rgba(0, 75, 255, 0.2)')};
  padding: 0.8rem;
  color: var(--co-primary);
  svg {
    width: 17px;
    height: 17px;
  }
`;
const PrimaryText = styled.button`
  background: transparent;
  padding: 0.8rem;
  color: var(--co-primary);
  svg {
    width: 24px;
    height: 14px;
  }
  span {
    font-family: var(--ff-sbold);
  }
  &.bigger-icon {
    svg {
      width: 24px;
      height: 24px;
      margin-right: 0.5rem;
    }
  }
`;
const PrimaryIconBtn = styled.button`
  background: transparent;
  padding: 0.8rem;
  color: ${props => (props.color ? props.color : '#838CA2')};
  svg {
    width: 17px;
    height: 17px;
  }
  span {
    margin-left: 0.5rem;
    font-family: var(--ff-medium);
    font-weight: 500;
    font-size: 1.4rem;
  }
  &.responsive {
    span {
      display: none;
      @media (min-width: 768px) {
        display: inline-block;
      }
    }
  }
`;
const DropBtn = styled.button`
  background: transparent;
  padding: 0.8rem;
  color: ${props => (props.color ? props.color : '#004BFF')};
  font-size: 1.4rem;
  align-items: center;
  text-transform: none;
  svg {
    width: 12px;
    height: 12px;
  }
  span {
    font-family: var(--ff-sbold);
    margin-right: 0.5rem;
  }
`;

const DivTabBtn = styled.div`
  background: rgb(241, 241, 244);
  padding: 0.6rem 1.5rem;
  color: #61677c;
  font-size: 1.4rem;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  min-width: 93px;
  font-family: var(--ff-medium);
  font-weight: 500;
  svg {
    width: 15px;
    height: 15px;
    margin-right: 0.5rem;
  }
  &.active {
    background: rgba(0, 75, 255, 0.1);
    color: #0a1045;
    border-bottom: 2px solid #004bff;
    font-family: var(--ff-sbold);
    font-weight: 600;
  }
`;

const TabBtn = styled.button`
  background: #f1f1f4;
  padding: 1rem 2.2rem;
  color: #61677c;
  font-size: 1.4rem;
  align-items: center;
  justify-content: center;
  text-transform: capitalize;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  min-width: 93px;
  font-weight: 500;
  svg {
    width: 15px;
    height: 15px;
    margin-right: 0.5rem;
  }
  span {
    font-family: var(--ff-medium);
  }
  &.active {
    background: rgba(0, 75, 255, 0.1);
    color: #0a1045;
    border-bottom: 2px solid #004bff;
  }
`;
const FormFieldBtn = styled.button`
  display: flex;
  align-items: center;
  padding: 1.5rem 1rem;
  width: 100%;
  &:hover {
    background-color: #fbfbff;
  }

  svg {
    min-width: 32px;
    width: 32px;
    height: 32px;
  }
  .btn-details {
    margin-left: 1rem;
    text-align: left;
    h3 {
      font-family: var(--ff-medium);
      font-weight: 500;
      font-size: 1.4rem;
      line-height: 1.6;
      color: #0a1045;
    }
    p {
      font-family: var(--ff-body);
      font-weight: 400;
      font-size: 1.4rem;
      line-height: 1.6;
      color: #838ca2;
    }
  }
`;
