import React from 'react';
import {Link} from 'react-router-dom';
import ReactMarkdown from 'react-markdown';
import {getHref} from '../utils';
import {Button} from 'reactstrap';
// import Tag from './Tag';
// import SessionDayTime from './SessionDayTime';
import SessionInfo from './SessionPage/SessionInfo';
import VoteButtons from './VoteButtons';
import {key} from '../utils';
import {image} from '../images';

const Session = ({proposal, speakers, user, attendProposal, onTagClick, eventConfig, location}) => {
  const {_id, title, type, tags, abstract, attended} = proposal;
  return (
    <div className="session b-strong d-flex mb-12" style={{minHeight: 440}}>
      {speakers.map(speaker => (
        <div className="session__speaker d-flex flex-column" key={key()}>
          <div
            style={{backgroundImage: `url(${image(speaker.picture, 236, 236)})`}}
            className="session__speaker-picture"
          />
          <div className="d-flex flex-column bg-purple2 text-white p-4 flex-grow-1">
            <h5>{speaker.name}</h5>
            <p className="flex-grow-1">{speaker.oneLiner}</p>
            <Link className="unstyled-link font-weight-bold" to={`/speaker/${getHref(speaker)}`}>
              ABOUT THE SPEAKER >>
            </Link>
          </div>
        </div>
      ))}
      <div className="p-4 d-flex flex-column justify-content-between">
        <div className="content">
          <h4 className="mb-5"><a className="unstyled-link" href={`/session/${_id}`}>{title}</a></h4>
          <div className="mb-5">
          <SessionInfo session={proposal} onTagClick={onTagClick} location={location}/>
          </div>
          <ReactMarkdown className="mb-4 session__abstract" source={abstract} />
        </div>
        <div className="d-flex justify-content-end align-items-center">
          <VoteButtons
            user={user}
            attended={attended}
            proposalId={_id}
            attendProposal={attendProposal}
            eventConfig={eventConfig}
          />
        </div>
      </div>
    </div>
  );
};

export default Session;
