text: /* This is an example snippet - you should consider tailoring it
  to your service.
  */
  /*
    Add these to your `package.json`:
      "apollo-boost": "^0.3.1",
      "graphql": "^14.2.1",
      "graphql-tag": "^2.10.0",
      "react-apollo": "^2.5.5"
  */
  import React, { useEffect, useState } from 'react';
  import moment from 'moment';
  import useStateWithError from 'azrmui/hooks/useStateWithError';
  /* eslint-disable react/sort-comp */
  import axios from 'axios';
  import { makeStyles } from '@material-ui/core/styles';
  import Paper from '@material-ui/core/Paper';
  // import { getDefaultBeforeDaysConfig, makeDaysFilter } from '~/utils/beforeDaysHelper';
  // import { compareString, formatTime } from '~/utils/tableUtils';
  import DialogTitle from '@material-ui/core/DialogTitle';
  import Divider from '@material-ui/core/Divider';
  import DialogContent from '@material-ui/core/DialogContent';
  import Button from '@material-ui/core/Button';
  import DialogActions from '@material-ui/core/DialogActions';
  import {
    FormNumberInput, FormOutlinedSelect, FormFieldButtonSelect, FormTextField, FormSpace,
  } from 'azrmui/core/FormInputs';
  import DateRangeInput from '~/components/DateRangeInput';
  import useRouterPush from '~/hooks/useRouterPush';
  import TagsAutocomplete from '~/components/TagsAutocomplete';
  import useTextField from '~/components/hooks/inputs/useTextField';
  import useFormSelect from '~/components/hooks/inputs/useFormSelect';
  import useNumberInput from '~/components/hooks/inputs/useNumberInput';
  import useSwitch from '~/components/hooks/inputs/useSwitch';
  import { isFunctionV2 } from 'common/utils';
  
  const useStyles = makeStyles(theme => ({
    paper: {
      width: '100%',
      // border: `solid 1px ${theme.palette.grey[300]}`,
      border: `solid 1px black`,
      marginBottom: 24,
      padding: 8,
    },
  }));
  
  function isInteger(str) {
    return !Number.isNaN(str) && !Number.isNaN(parseInt(str));
  }
  
  
  export default (props) => {
    const {
      value: v,
      onChange = () => {},
      selectedType,
      formApiRef,
    } = props;
  
    const classes = useStyles();
  
    const value = v || {};
  
    const [
      [seriesName, setSeriesName, seriesNameError, setSeriesNameError],
      seriesNameInput,
    ] = useTextField(value.seriesName || '', '', {
      label: '系列名稱',
      required: true,
      placeholder: 'ex. GENDER FREE',
    });
  
    const [
      [priority, setPriority, priorityError, setPriorityError],
      priorityInput,
    ] = useNumberInput(value.priority || 0, '', {
      label: '順序(數字大的在上)',
      required: true,
    });
  
    useEffect(() => {
      onChange({
        seriesName,
        priority,
      });
    }, [
      seriesName,
      priority,
    ]);
  
    const getDataToSubmit = () => {
      if (
        (selectedType === 'lv1-series')
        || ((selectedType || '').startsWith('lv2-series'))
      ) {
        let errorOccurred = false;
        if (!priority || !isInteger(priority)) {
          setPriorityError('錯誤的順序');
          errorOccurred = true;
        }
        if (errorOccurred) {
          return;
        }
        return {
          seriesName: seriesName || '',
          priority: priority || 0,
        };
      }
      return {};
    };
  
    if (formApiRef) {
      if (isFunctionV2(formApiRef)) {
        formApiRef({ getDataToSubmit });
      } else {
        formApiRef.current = { getDataToSubmit };
      }
    }
  
    return (
      <React.Fragment>
        {(
          (selectedType === 'lv1-series')
          || ((selectedType || '').startsWith('lv2-series'))
        )
          && (
            <Paper className={classes.paper} elevation={0}>
              {seriesNameInput.render()}
              <FormSpace variant="content1" />
              {priorityInput.render()}
            </Paper>
          )
        }
      </React.Fragment>
    );
  };
  