import React from 'react';

import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import Typography from '@mui/material/Typography';
import { FlatButton } from 'B/Button';
import { Trans } from '@lingui/macro';
import { mdiChevronRight } from '@mdi/js';
import Icon from '@mdi/react';
import styled from 'styled-components';

import { PointItem, TicketItem } from '../types';

const StyledCard = styled(Card)`
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  margin-bottom: 1em;
`;

const Color = styled.div`
  align-self: stretch;
  background-color: ${(props) => props.color ?? ''};
  min-width: 2.3em;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
`;

const Info = styled.div`
  display: block;
  padding: 1em;
  margin-right: auto;
`;

const StyledComment = styled.div`
  font-weight: bold;
  white-space: pre-line;
`;

const _MoreInfo = styled(FlatButton)`
  flex: 0 0 3.4em;
`;

const HtmlDiv = styled.div`
  img {
    max-width: 100% !important;
  }
`;

const NameInfo: React.FC<{ info: PointItem }> = ({ info }) => {
  let names = [];
  if (info.name) {
    names.push(info.name);
  }

  const namepath = names.join(' / ');

  return <h4>{namepath}</h4>;
};

const TextInfo = (props) => {
  const info: TicketItem = props.info;

  return (
    <Info>
      <NameInfo info={info} />
      {info.comment ? (
        <StyledComment>{info.comment}</StyledComment>
      ) : (
        <span>&nbsp;</span>
      )}
      {info.html_info ? (
        <HtmlDiv dangerouslySetInnerHTML={{ __html: info.html_info }}></HtmlDiv>
      ) : (
        <span>&nbsp;</span>
      )}
      <CountInfo count={info?.open_tickets} />
    </Info>
  );
};

const CountInfo: React.FC<{ count: number }> = ({ count }) => {
  if (count == null) {
    return null;
  }

  return (
    <Typography variant='h6' color='secondary'>
      <Trans>Ticket left: </Trans> {count}
    </Typography>
  );
};

export type CardProps = {
  info: PointItem;
  handleMoreInfoClick: () => void;
};

const DashCard = (props: CardProps) => {
  const info = props.info;
  const { handleMoreInfoClick } = props;

  return (
    <StyledCard>
      <Color color={info.color} />
      <TextInfo info={info} />
      <Button variant='outlined' onClick={handleMoreInfoClick}>
        <Trans>Sign up</Trans>
      </Button>
    </StyledCard>
  );
};

export default DashCard;