import React, {Component, ComponentClass, createContext} from 'react';
import { IFilterType, IFiltersData, IFiltersSingle } from './type';

// import { DataService } from 'data/DataService';
interface Props {
  filtersType: string;
  getJwtToken?: () => string;
}

interface State {
  filtersData: IFiltersData[];
  fundDimensions: IFilterType[];
  investmentDimensions: IFilterType[];
}

interface FilterContextInterface {
  clear: (e: React.MouseEvent<HTMLInputElement>) => void;
  active: (e: React.MouseEvent<HTMLInputElement>) => void;
}

const { Provider, Consumer } = createContext<FilterContextInterface | null>(null);

export const FilterProvider = Provider;
export const FilterConsumer = Consumer;

export const FiltersContainer = (ContainerComponent: ComponentClass) =>
  class extends Component<Props, State> {

    constructor(props: Props) {
      super(props);
      this.state = {
        fundDimensions: [
          { name: 'vintageYear', label: 'Vintage Year' },
          { name: 'sectorGroup', label: 'Sector Focus' },
          { name: 'stageGroup', label: 'Stage Focus' },
          { name: 'teamLocation', label: 'Team Location' },
        ],
        investmentDimensions: [
          { name: 'investmentYear', label: 'Investment Year' },
          { name: 'investmentSectorGroup', label: 'Sector' },
          { name: 'investmentStageGroup', label: 'Stage' },
          { name: 'investmentCountry', label: 'Country' },
        ],
        filtersData: [],
      };
      this.setActiveElement = this.setActiveElement.bind(this);
      this.clearFilters = this.clearFilters.bind(this);
      this.getFilters = this.getFilters.bind(this);
    }
    componentDidMount() {
      this.getFilters().then(({data:filtersData}: any) => {

        this.setState({
              filtersData:
                  Object.keys(filtersData).length !== 0 &&
                  this.state[this.props.filtersType].map((item: IFilterType) => {
                      const current = Object.keys(filtersData).filter(single => single === item.name);
                      filtersData[current[0]].placeholder = item.label;
                      filtersData[current[0]].values = filtersData[current[0]].values.map((element: string) => {
                          return { title: element, checked: false };
                      });
                      return filtersData[current[0]];
                  }),
          });
      });
    }

    async getFilters(values?: any) {
      // const token = this.context && this.context.getJwtToken ? this.context.getJwtToken() : '';
      // return await DataService('graphql', token, {
      //   operationName: null,
      //   query: `{
      //     vintageYear: funds(dimensions: ["vintageYear"], sorted: true) {
      //       values: vintageYear
      //     }
      //     sectorGroup: funds(dimensions: ["sectorGroup"], sorted: true) {
      //       values: sectorGroup
      //     }
      //     stageGroup: funds(dimensions: ["stageGroup"], sorted: true) {
      //       values: stageGroup
      //     }
      //     teamLocation: funds(dimensions: ["teamLocation"], sorted: true) {
      //       values: teamLocation
      //     }
      //     investmentYear: investments(dimensions: ["investmentYear"], sorted: true) {
      //       values: investmentYear
      //     }
      //     investmentSectorGroup: investments(dimensions: ["investmentSectorGroup"], sorted: true) {
      //       values: investmentSectorGroup
      //     }
      //     investmentStageGroup: investments(dimensions: ["investmentStageGroup"], sorted: true) {
      //       values: investmentStageGroup
      //     }
      //     investmentCountry: investments(dimensions: ["investmentCountry"], sorted: true) {
      //       values: investmentCountry
      //     }
      //   }`,
      //   variables: {},
      // });
    }

    setActiveElement(e: React.MouseEvent<HTMLInputElement>) {
      e.persist();
      const title = e.currentTarget.getAttribute('data-title');
      this.setState(prevState => {
        const newData = prevState.filtersData.map((item: any) => {
          item.values = item.values.map((single: IFiltersSingle) => {
            if (single.title === title) {
              single.checked = !single.checked;
            }
            return single;
          });
          return item;
        });

        return { filtersData: newData };
      });
    }

    clearFilters(e?: React.MouseEvent<HTMLInputElement>) {
      const title = e && e.currentTarget.getAttribute("data-title");
      this.setState(prevState => {
        const newData = prevState.filtersData.map((item: any) => {
          item.values = item.values.map((single: IFiltersSingle) => {
            single.checked = item.placeholder === title ? false : single.checked;
            if (title === null) {
              single.checked = false;
            }
            return single;
          });
          return item;
        });

        return { filtersData: newData };
      });
    }

    render() {
      const newProps = {
        ...this.props,
        filtersData: this.state.filtersData,
        setActive: this.setActiveElement,
        clearFilters: this.clearFilters,
      };

      return (
        <FilterProvider value={{ clear: this.clearFilters, active: this.setActiveElement }}>
          <ContainerComponent {...newProps} />
        </FilterProvider>
      );
    }
  };