import React from 'react';
import Carousel from 'nuka-carousel';
import PropTypes from 'prop-types';
import format from 'date-fns/format';
import { SlideWithImage } from '../../shared';
import styled from 'styled-components';

const ResourceText = styled.div`
  a {
    text-decoration: none;
    color: white;
  }
`;

export const ResourceCarousel = ({ data }) => {
  data.forEach(
    resource =>
      (resource.formattedDate = format(new Date(resource.date), 'MM/dd/yyyy'))
  );
  return (
    <Carousel
      wrapAround={true}
      renderCenterCenterControls={({ currentSlide }) => {
        const { description, formattedDate, title, url } = data[currentSlide];
        return (
          <ResourceText>
            <a href={url} target="_blank" rel="noopener noreferrer">
              <h2>{title}</h2>
              <p>{description}</p>
              <p>{formattedDate}</p>
            </a>
          </ResourceText>
        );
      }}
    >
      {data.map(resource => {
        return <SlideWithImage key={resource.id} event={resource} />;
      })}
    </Carousel>
  );
};

ResourceCarousel.defaultProps = {
  data: [
    {
      date: '2019-10-26T20:52:01.462Z',
      description: '',
      formattedDate: '10/26/2019',
      id: '0',
      img: 'https://placedog.net/500',
      title: 'Sorry no resources yet! Come Back soon!',
      url:
        'https://www.notion.so/notiondenver/Dev-Tools-3eab78eed2024576aaf30fbec78a6b78'
    }
  ]
};
const dataObj = PropTypes.shape({
  date: PropTypes.string,
  description: PropTypes.string,
  formattedDate: PropTypes.string,
  id: PropTypes.string,
  img: PropTypes.string,
  title: PropTypes.string,
  url: PropTypes.string
});

ResourceCarousel.propTypes = {
  data: PropTypes.arrayOf(dataObj).isRequired
};
