import React, { useState } from 'react';
import { Collapsible } from 'react-navigation-collapsible';
import {
  CollapsibleContext,
  CollapsibleContextType,
} from '../../utils/CollapsibleContext';

type Props = {
  children: React.ReactChild;
};

export default function CollapsibleProvider(props: Props) {
  const setCollapsible = (collapsible: Collapsible) => {
    setCurrentCollapsible((prevState) => ({
      ...prevState,
      collapsible,
    }));
  };

  const [
    currentCollapsible,
    setCurrentCollapsible,
  ] = useState<CollapsibleContextType>({
    collapsible: undefined,
    setCollapsible: setCollapsible,
  });

  return (
    <CollapsibleContext.Provider value={currentCollapsible}>
      {props.children}
    </CollapsibleContext.Provider>
  );
}
