/** @jsx jsx */
import { css, jsx } from "@emotion/core";
import * as React from "react";

// @ts-ignore
import COLORS from "../../constants/colors";

import {
  CardAtom,
  IconAtom,
} from "../../atoms";

interface IProps {
  className?: any;
  coverImage?: string;
  level?: string;
  title?: string;
  badge?: string;
  instructor?: string;
  totalDuration?: number;
  isBookmarked?: any;
  onBookmark?: any;
  IconComponent?: any;
  LinkComponent?: any;
  css?: any;
}

const renderDuration = (seconds: number): string => {  
  const hours = Math.floor(seconds / 3600);
  const minutes = Math.floor((seconds % 3600) / 60);
  const hourText = hours === 0 ? "" : `${hours} h`;
  const minuteText = minutes === 0 ? "" : `${minutes} m`;
  return `${hourText} ${minuteText}`
};

class CourseCardMolecule extends React.PureComponent<IProps, any> {
  public state = {};

  public render() {
    const {
      className = "",
      coverImage = "",
      level = "",
      title = "",
      badge = "",
      instructor = "",
      totalDuration = 0,
      isBookmarked = false,
      onBookmark = () => {},
      IconComponent = () => null,
      LinkComponent = (props: any) => props.children,
    } = this.props;
    return (
      <CardAtom
        type="COURSE"
        className={className} 
        css={[
          css`
            width: 260px;
            height: 345px;
            position: relative;
          `, this.props.css]}
      >
        {
          badge && (
            <div
              css={css`
                position: absolute;
                width: 80px;
                height: 40px;
                background-color: ${COLORS.GREEN.DARKER};
                left: -7px;
                top: 10px;
                padding: 11px;
                text-align: center;
              `}
            >         
              <div css={css`
                  width: 0;
                  height: 0;              
                  border-top: 13.6px solid ${COLORS.GREEN.DARKEST};
                  border-left: 11.9px solid transparent;
                  position: absolute;
                  bottom: -14px;
                  left: 0px;
                  z-index: -10;
              `}></div>
              <span css={css`
                font-size: 16px;
                font-weight: 600;
                color: ${COLORS.WHITE.NORMAL};
              `}
              >{badge}</span>
            </div>
          )
        }
        <img 
          src={coverImage}
          css={css`
            width: 100%;
            border-radius: 10px 10px 0 0;
          `}           
        />
          <div css={css`
            padding: 0px 20px 0px 20px;
          `}>
            <p 
              css={css`
                font-size: 12px;
                color: ${COLORS.GREEN.DARKER};
                font-weight: bold;
                display: -webkit-box;
                max-width: 100%;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              `}
            >{level}</p>
            <LinkComponent>
              <p
                css={css`
                  font-size: 16px;
                  font-weight: 600;
                  line-height: 1.5;
                  margin-bottom: 0;
                  color: ${COLORS.BLACK.NORMAL};
                  display: -webkit-box;
                  max-width: 100%;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
                `}
              >{title}</p>
            </LinkComponent>
            <p
              css={css`
                font-size: 14px;
                color: ${COLORS.BLACK.NORMAL};
                display: -webkit-box;
                max-width: 100%;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              `}
            >{instructor}</p>
            <p
              css={css`
                font-size: 12px;
                color: #8293a2;
              `}
            >
              <IconAtom 
                name="clock"
                className={css`color: ${COLORS.BLACK.NORMAL};`}
              />
              <span css={css`margin-left: 5px;`}>{renderDuration(totalDuration)}</span>
            </p>
            <div
              onKeyPress={() => {}}
              onClick={onBookmark ? onBookmark : () => {} }
              css={css`
                position: absolute;
                bottom: 20px;
                right: 20px;
              `}
            >
              {isBookmarked
              ? <IconAtom 
                  name="bookmark" 
                  css={css`color: ${COLORS.BLACK.NORMAL};`}
                  className="f3"
                />
              : <IconComponent />}
            </div>            
          </div>        
    </CardAtom>
    )
  }
}

export { CourseCardMolecule };