import NoDataSection from '../NoDataSection'
import StyledTabsContainer from '../StyledTabsContainer'
import WorkshopData from './WorkshopData'
import { WorkshopForm } from './WorkshopForm'

const Workshop = ({ workshops }) => {
  const attendedWorkshops = workshops?.filter((w) => !w.organized)
  const organisedWorkshops = workshops?.filter((w) => w.organized)

  const tabs = [
    {
      key: 'Attended',
      label: 'Attended',
      component: (
        <WorkshopData title={'Attended'} workshop={attendedWorkshops} />
      ),
    },
    {
      key: 'Organised',
      label: 'Organised',
      component: (
        <WorkshopData title={'Organised'} workshop={organisedWorkshops} />
      ),
    },
  ]
  const isWorkshop = workshops && workshops?.length > 0

  return isWorkshop ? (
    <>
      <StyledTabsContainer
        tabs={tabs}
        centered
        textColor="primary"
        indicatorBackgroundColor="primary"
      />
    </>
  ) : (
    <NoDataSection
      title="Workshop"
      subtitle="Add Workshop"
      addButtonTitle="Add Your workshop"
      addButtonContent={({ close }) => (
        <WorkshopForm data={null} hideDialog={close} />
      )}
    />
  )
}

export default Workshop
