import React, { useEffect } from 'react';
import { Alert, Col, Row, Card, CardBody, Table } from 'reactstrap';
import FalconCardHeader from '../common/FalconCardHeader';
import { useTranslation } from 'react-i18next';
import { useDispatch, useSelector } from 'react-redux';
import { fetchSessions } from '../../store/features/sessionsSlice';
import { isIterableArray } from '../../helpers/utils';
import { useResponsive } from '@farfetch/react-context-responsive';

import JKSessionSwiper from '../sessions/JKSessionSwiper';
import JKSessionList from '../sessions/JKSessionList';
import Loader from '../common/Loader';

function JKMusicSessions() {
  const { t } = useTranslation();
  const dispatch = useDispatch();
  const sessions = useSelector(state => state.session.sessions);
  const loadingStatus = useSelector(state => state.session.status);
  const { greaterThan } = useResponsive();

  useEffect(() => {
    dispatch(fetchSessions());
  }, []);

  return (
    <Card>
      <FalconCardHeader title={t('list.page_title', { ns: 'sessions' })} titleClass="font-weight-bold" />
      <CardBody className="pt-0">
        {loadingStatus === 'loading' && sessions.length === 0 ? (
          <Loader />
        ) : isIterableArray(sessions) ? (
          <>
            {greaterThan.sm ? (
              <Row className="mb-3 justify-content-between d-none d-md-block">
                <div className="table-responsive-xl px-2">
                  <JKSessionList sessions={sessions} />
                </div>
              </Row>
            ) : (
              <Row className="swiper-container d-block d-md-none" data-testid="sessionsSwiper">
                <JKSessionSwiper sessions={sessions} />
              </Row>
            )}
          </>
        ) : (
          <Row className="p-card">
            <Col>
              <Alert color="info" className="mb-0">
                {t('no_records', { ns: 'common' })}
              </Alert>
            </Col>
          </Row>
        )}
      </CardBody>
    </Card>
  );
}

export default JKMusicSessions;
