/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { FunctionComponent } from 'react';
import cn from 'classnames';

import { Divider as SquareDivider } from '../Divider';
import { CardProps } from './types.d';
import { Paragraph } from '../Paragraph';
import { Title } from '../Title';
import { CardDivider, CardParameter, CardParametersGrid, CardProgress, CardTags, CardUsers } from './components';
import { StyledCardContainer } from './styled-components';
import { useTheme } from '../Theme';

const SquareCard: FunctionComponent<CardProps> = ({
  children,
  className = '',
  logo,
  menu,
  onClick,
  rightContainer,
  mainContainerWidth,
  size = 'big',
  style = {},
  subTitle,
  title,
  isSelected = false,
  view = 'column',
}) => {
  const theme = useTheme();
  const renderLogo = () => {
    if (!logo) return null;
    const isUrl = typeof logo === 'string';
    const isStringTitle = typeof title === 'string';
    return (
      <div className="card__team">
        <div className="card__logo" style={{ borderRadius: isUrl ? '10px' : 0 }}>
          {isUrl ? <img className="card__pic" src={logo.toString()} alt="" /> : logo}
        </div>
        <a className="card__title" data-effect="mfp-zoom-in" role="presentation">
          {isStringTitle ? <Title size="small">{title}</Title> : title}
          {menu ? <div className="options js-options">{menu()}</div> : <></>}
        </a>
      </div>
    );
  };

  const renderCardHeader = () => {
    const isStringTitle = typeof title === 'string';
    return (
      <div className="card__head">
        {logo === undefined ? (
          <a className="card__title" data-effect="mfp-zoom-in" role="presentation">
            {isStringTitle ? <Title size="small">{title}</Title> : title}
          </a>
        ) : (
          <></>
        )}
        {subTitle && (
          <Paragraph className="card__info" size="small">
            {subTitle}
          </Paragraph>
        )}
        {menu && !logo ? <div className="options js-options">{menu()}</div> : <></>}
      </div>
    );
  };

  const cardClassNames = cn({
    card: true,
    card_right: !!rightContainer?.component,
    [`card_${size}`]: true,
    [className]: className,
    [view]: true,
  });

  const renderCardRightContainer = () => {
    if (!rightContainer?.component || rightContainer?.fullHeight) return null;
    return (
      <>
        <SquareDivider orientation="vertical" />
        <div style={{ flex: rightContainer?.flexNumber ?? 2 }}>
          <div className="card_right_container" style={{ width: rightContainer?.width }}>
            {rightContainer?.component}
          </div>
        </div>
      </>
    );
  };

  const renderFullHeightCardRightContainer = () => {
    if (!rightContainer?.component || !rightContainer?.fullHeight) return null;
    return (
      <>
        <SquareDivider orientation="vertical" />
        <div style={{ flex: rightContainer?.flexNumber ?? 2, width: rightContainer?.width }}>
          <div className="card_right_container">{rightContainer?.component}</div>
        </div>
      </>
    );
  };

  return (
    <StyledCardContainer onClick={onClick} className={cardClassNames} style={style} $theme={theme} $selected={isSelected}>
      <div
        className="card-title-and-content-container"
        style={{ width: mainContainerWidth, flex: rightContainer?.fullHeight ? 2 : 1 }}
      >
        <div>
          {logo || title || subTitle ? (
            <>
              {renderLogo()}
              {renderCardHeader()}
            </>
          ) : null}
        </div>
        <div style={{ display: 'flex', flexDirection: 'row', width: '100%', alignItems: 'center' }}>
          <div className="card-main-container" style={{ flex: 2 }}>
            {children}
          </div>
          {menu && view === 'row' ? menu() : <></>}
          {renderCardRightContainer()}
        </div>
      </div>
      {renderFullHeightCardRightContainer()}
    </StyledCardContainer>
  );
};

export const Card = Object.assign(SquareCard, {
  Divider: CardDivider,
  Parameter: CardParameter,
  ParametersGrid: CardParametersGrid,
  Progress: CardProgress,
  Tags: CardTags,
  Users: CardUsers,
});
