/* eslint-disable import/no-cycle */
/* eslint-disable react/destructuring-assignment */
/* eslint-disable react/prop-types */
import React from 'react';
import { Button, CardTitle, CardSubtitle, Input } from 'reactstrap';
import '../stylesheets/style.scss';
import QueryList from './QueryList';
// import { GraphqlCodeBlock } from 'graphql-syntax-highlighter-react';

const CategoryData = props => {
  return (
    <div>
      <CardTitle>
        <h4>{props.catData.name}</h4>
      </CardTitle>
      <CardSubtitle>
        Frequency(ms): <br />{' '}
        <div id="freqExamples">
          (ex: 1 sec = 1000; 1 min = 60000; 30 min = 1800000; 1 hour = 3600000; 1 day = 86400000)
        </div>
      </CardSubtitle>
      <Input
        type="text"
        name="frequency"
        id={`${props.catData.name}-freq`}
        placeholder="Set frequency of query execution"
        value={props.catData.frequency}
        onChange={props.freqChange}
      />
      <br />
      <CardSubtitle>Queries:</CardSubtitle>
      <QueryList
        key={props.catData.name}
        name={props.catData.name}
        queries={props.catData.queries}
        deleteQuery={props.deleteQuery}
        queryChange={props.queryChange}
      />
      <div id="btnAddQuery">
        <Button
          className="addQueryBtn"
          color="primary"
          size="md"
          id={`${props.catData.name}-addQuery`}
          onClick={props.addQuery}
          block
        >
          Add Query
        </Button>
      </div>
    </div>
  );
};
export default CategoryData;