/* eslint-disable no-console */
/* eslint-disable react/jsx-key */
import { Typography } from '@mui/material'
import ActionButton from '../../ActionButton'
import { DialogButton } from '../../ModalButtons'
import NoDataSection from '../NoDataSection'
import PublicationCard from './PublicationCard'
import { PublicationsForm } from './PublicationsForm'
import { StyledBoxCard, StyledBoxContainer } from './Styles'

const Experience = ({ paperPublications, userProfile }) => {
  const isPaperPublication = paperPublications && paperPublications.length > 0

  return isPaperPublication ? (
    <>
      <StyledBoxContainer>
        <Typography variant="h3">Paper Publications</Typography>
        <DialogButton
          anchor={({ open }) => (
            <ActionButton onClick={open} variant="text">
              +Add Paper Publication
            </ActionButton>
          )}
          content={({ close }) => (
            <PublicationsForm
              data={null}
              hideDialog={close}
              userProfile={userProfile}
            />
          )}
          title="Add Paper Publication"
        />
      </StyledBoxContainer>
      <StyledBoxCard>
        {paperPublications.map((data) => (
          <PublicationCard data={data} userProfile={userProfile} />
        ))}
      </StyledBoxCard>
    </>
  ) : (
    <NoDataSection
      title="Paper Publication"
      subtitle="Add Paper Publication"
      addButtonTitle="Add Publication"
      addButtonContent={({ close }) => (
        <PublicationsForm data={null} hideDialog={close} />
      )}
    />
  )
}

export default Experience
