import React from 'react';
import styled from 'styled-components';
import Rodal from 'rodal';
import 'rodal/lib/rodal.css';

export const ModalWrapper = ({
  visible,
  setvisible,
  children,
  title,
  height,
}) => {
  return (
    <div className="basic-modal">
      <Rodal
        visible={visible}
        onClose={() => setvisible(false)}
        showCloseButton={false}
        width={515}
        height={height}
      >
        <ModalContent className="modal-content">
          <div className="modal-header">
            <ModalTitle>{title}</ModalTitle>
          </div>
          {children}
        </ModalContent>
      </Rodal>
    </div>
  );
};

export const LargeModal = ({
  visible,
  setvisible,
  children,
  title,
  spantitle,
  largespantitle,
  height,
}) => {
  return (
    <React.Fragment>
      <Rodal
        visible={visible}
        onClose={() => setvisible(false)}
        showCloseButton={false}
        width={650}
        height={height}
      >
        <ModalContent className="modal-content">
          <div className="modal-header">
            <ModalTitle>{title}</ModalTitle>
            <h4 className="name">{spantitle}</h4>
            <h4 className="name">{largespantitle}</h4>
            <p></p>
          </div>
          {children}
        </ModalContent>
      </Rodal>
    </React.Fragment>
  );
};

export const VeryLargeModal = ({
  visible,
  setvisible,
  children,
  title,
  height,
  spantitle,
  largespantitle,
}) => {
  return (
    <div className="very-large-modal">
      <Rodal
        visible={visible}
        onClose={() => setvisible(false)}
        showCloseButton={false}
        width={820}
        height={height}
      >
        <ModalContent className="modal-content">
          <div className="modal-header">
            <ModalTitle>
              {title}
              {largespantitle ? (
                <span className="large-span">{largespantitle}</span>
              ) : (
                ''
              )}
            </ModalTitle>
            {spantitle ? <p className="small-span">{spantitle}</p> : ''}
          </div>
          {children}
        </ModalContent>
      </Rodal>
    </div>
  );
};

export const SmallModal = ({
  visible,
  setvisible,
  children,
  title,
  height,
}) => {
  return (
    <div className="small-modall">
      <Rodal
        visible={visible}
        onClose={() => setvisible(false)}
        showCloseButton={false}
        width={385}
        height={height || 240}
      >
        <ModalContent className="modal-content small-modal">
          <div className="modal-header">
            <ModalTitle>{title}</ModalTitle>
          </div>
          {children}
        </ModalContent>
      </Rodal>
    </div>
  );
};

const ModalTitle = styled.h3`
  font-size: 2rem;
  font-weight: 600;
  font-family: var(--ff-sbold);
  color: var(--co-head);
`;

const ModalContent = styled.div`
  .modal-header {
    padding: 3rem 4rem;
    display: flex;
    align-items: center;
  }
  & .name {
    margin-left: 30px;
    display: flex;
    align-items: center;
    .small-span {
      font-size: 12px;
      margin-left: 0.8rem;
    }
    .large-span {
      opacity: 0.7;
      margin-left: 0.5rem;
    }
  }
  &.small-modal {
    .modal-header {
      font-size: 1.8rem;
      padding-bottom: 1.5rem;
    }
    ${ModalTitle} {
      font-size: 1.8rem;
    }
    p {
      margin-bottom: 3rem;
      font-size: 16px;
      line-height: 1.75;
      span {
        font-family: var(--ff-bold);
        font-weight: 700;
        color: var(--co-head);
      }
    }
  }
`;
