import React from "react";
import PropTypes from "prop-types";
import { ContentContainer, FilterCardContainer } from "./FilterCard.styled";
import HeaderBack from "../../ItemDetails/Header/Header";
import FilterHeader from "./FilterHeader/FilterHeader";
import FilterFooter from "./FilterFooter/FilterFooter";
import CategoryChoser from "./Choser/CategoryChoser/CategoryChoser";
import SubcategoryChoser from "./Choser/SubcategoryChoser/SubcategoryChoser";
import LocationChoser from "./Choser/LocationChoser/LocationChoser";
import SkeletonFilterCard from "./Skeleton/SkeletonFilterCard";

const FilterCard = (props) => {
  const offers = props.offers;
  const filters = offers.filters;
  return (
    <FilterCardContainer
      filtersOpened={props.filtersOpened}
      myOffers={props.myOffers}
      skeleton={props.skeleton}
    >
      <SkeletonFilterCard
        animationStage={props.animationStage}
        skeleton={props.skeleton}
      />
      {/* Header title for my offers */}
      {props.myOffers && <HeaderBack />}

      <FilterHeader filters={filters} />

      <ContentContainer>
        {/* Categories */}
        <CategoryChoser filters={filters} />

        {/* Subcategories */}
        <SubcategoryChoser filters={filters} />

        {/* Locations */}
        <LocationChoser filters={filters} />
      </ContentContainer>

      <FilterFooter
        toggleFilters={props.toggleFilters}        
        filters={offers}
      />
    </FilterCardContainer>
  );
};

FilterCard.propTypes = {
  children: PropTypes.node,
  offers: PropTypes.any,
  responsive: PropTypes.bool,
  responsiveOpen: PropTypes.bool,
  closeResponsive: PropTypes.func,
  myOffers: PropTypes.bool,
  skeleton: PropTypes.bool,
  animationStage: PropTypes.number,
  filtersOpened: PropTypes.bool,
  toggleFilters: PropTypes.func,
};

FilterCard.defaultProps = {
  responsive: false,
  responsiveOpen: false,
};

export default FilterCard;
