import { Col, Row } from "antd";
import LabelTooltip from "components/LabelTooltip/LabelTooltip";
import moment from "moment";
import React, { useMemo } from "react";
import { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
import { BandsintownArtistEvent } from "../../redux/User/types";
import DragDropButton from "../Button/DragDropButton";
import { Paragraph } from "../Typography";
import "./BandsintownEventCard.scss";

interface Props {
  index?: number;
  item: BandsintownArtistEvent;
  titleShortcut?: boolean;
  dragHandleProps?: DraggableProvidedDragHandleProps;
}

const BandsintownEventCard: React.FC<Props> = ({ item, dragHandleProps }) => {
  const date = useMemo(() => {
    return moment(item.datetime);
  }, [item.datetime]);

  return (
    <React.Fragment>
      <div className="border-box d--flex bandsintown-event-card border__radius--8">
        <Row
          align="middle"
          wrap={false}
          className="bandsintown-event-card__wrapper"
        >
          <Col className="bandsintown-event-card__picture full-height">
            <Paragraph
              preset="medium12"
              className="text--white text__align--center opacity--50 uppercase leading-16"
            >
              {date.format("MMM")}
            </Paragraph>
            <Paragraph
              preset="bold32"
              className="text--white text__align--center leading-42"
            >
              {date.format("DD")}
            </Paragraph>
            <Paragraph
              preset="medium12"
              className="text--white text__align--center opacity--50 uppercase leading-16"
            >
              {date.format("YYYY")}
            </Paragraph>
          </Col>
          <Col flex={"1"}>
            <Row
              className="bandsintown-event-card__content p__x--16 p__y--16"
              wrap={false}
              align="middle"
            >
              <Col flex="1">
                <LabelTooltip
                  preset="semibold16"
                  className="d--block "
                  label={item?.venue.name as string}
                  ellipsis={true}
                  maxLength={(item?.venue.name as string).length}
                  showTooltip={(item?.venue.name as string).length > 36}
                />
                <LabelTooltip
                  preset="regular14"
                  className="d--block m__t--4 text--grey4 "
                  label={item.venue.location as string}
                  ellipsis={{ rows: 1 }}
                  maxLength={item.venue.location.length}
                  showTooltip={item.venue.location.length > 36}
                />
              </Col>
            </Row>
          </Col>
          <DragDropButton
            className="p__x--0 p__y--0 d--none"
            dragType="vertical"
            dragHandleProps={dragHandleProps}
            disabled={true}
          />
        </Row>
      </div>
    </React.Fragment>
  );
};

export default BandsintownEventCard;
