import React from 'react';
import { Job } from '@/PersonalDataTypes';
import { Accordion } from 'react-bootstrap';
import { JobListProps } from './types';
import JobTags from './JobTags';
import md from '../Markdown';

function JobTitle(props: {job: Job, heading?: string}) {
  const {job, heading} = props
  return (
    <div>
      <div><strong>{job.position}</strong></div>
      <div>{[job.company, job.timerange].filter(x => x).join(', ')}</div>
      {heading && (<div>({heading})</div>)}
    </div>
  )
}

function AccordionJobItem(props: {job: Job, eventKey: string, heading?: string}) {
  const {job, eventKey} = props
  return (
    <Accordion.Item eventKey={eventKey}>
        <Accordion.Header><JobTitle job={job} /></Accordion.Header>
        <Accordion.Body className='multiline'>
        {md(job.description)}
        {job.tags && <JobTags tags={job.tags} />}
        </Accordion.Body>
    </Accordion.Item>
  )
}

export type Props = {
  heading: string,
} & JobListProps

const defaultProps = {
  entriesPerRow: 2,
  currentHeading: 'Currently',
}

export default function JobsAccordion(props: JobListProps) {
  const {jobs} = props
  const config = {...defaultProps, ...props}
  return (
    <Accordion defaultActiveKey={jobs.current ? 'current-0' : 'previous-0'}>
      {jobs.current?.map((job, index) => <AccordionJobItem key={index} job={job} eventKey={`current-${index}`} heading={config.currentHeading} />)}
      {jobs.previous?.map((job, index) => <AccordionJobItem key={index} job={job} eventKey={`previous-${index}`} />)}
    </Accordion>
  )
}