'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _formatJavaScript = require('../../utils/formatJavaScript');

var _formatJavaScript2 = _interopRequireDefault(_formatJavaScript);

var _capitalizeFirstLetter = require('../../utils/capitalizeFirstLetter');

var _capitalizeFirstLetter2 = _interopRequireDefault(_capitalizeFirstLetter);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.default = {
  language: 'JavaScript',
  prismLanguage: 'jsx',
  name: 'react-apollo',
  options: [{
    id: 'client',
    label: 'with ApolloClient',
    initial: false
  }, {
    id: 'reactNative',
    label: 'react-native'
  }],
  generate: function generate(_ref) {
    var serverUrl = _ref.serverUrl,
        variables = _ref.variables,
        headers = _ref.headers,
        variableName = _ref.variableName,
        operationType = _ref.operationType,
        operationName = _ref.operationName,
        operation = _ref.operation,
        options = _ref.options;

    var graphqlOperation = 'const ' + variableName + ' = gql`\n' + operation + '`';

    var element = options.reactNative ? 'View' : 'div';
    var vars = JSON.stringify(variables, null, 2);
    var heads = JSON.stringify(headers, null, 2);

    var component = void 0;

    if (operationType === 'query') {
      component = '\n<Query query={' + variableName + '} context={{ headers: ' + heads + ' }} variables={' + vars + '}>\n{({ loading, error, data }) => {\n  if (loading) return <' + element + '>Loading</' + element + '>\n  if (error) return <' + element + '>Error</' + element + '>\n\n  if (data) {\n    return (\n      <' + element + '>{JSON.stringify(data, null, 2)}</' + element + '>\n    )\n  }\n}}\n</Query>';
    }

    if (operationType === 'mutation') {
      component = '\n    <Mutation mutation={' + variableName + '} context={{ headers: ' + heads + ' }}>\n    {(' + operationName + ', { loading, error, data }) => {\n      if (loading) return <' + element + '>Loading</' + element + '>\n      if (error) return <' + element + '>Error</' + element + '>\n\n      // call ' + operationName + '() to run the mutation\n      return <button onClick={() => ' + operationName + '({ variables: ' + vars + ' })}>Mutate</button>\n    }}\n    </Mutation>';
    }

    var clientSetup = options.client ? 'const apolloClient = new ApolloClient({\n      cache: new InMemoryCache(),\nlink: new HttpLink({\n  uri: "' + serverUrl + '",\n}),\n})\n' : '';

    var imports = [operationType === 'query' ? 'Query' : 'Mutation', options.client && 'ApolloProvider'].filter(Boolean);

    var reactImports = 'import { ' + imports.join(', ') + ' } from \'react-apollo\'';
    var reactNativeImports = options.reactNative ? 'import { View } from "react-native"' : '';
    var clientImports = options.client ? '\nimport { ApolloClient, InMemoryCache, HttpLink } from \'apollo-boost\'' : '';
    var gqlImport = 'import gql from "graphql-tag"';

    var snippet = '\n' + gqlImport + clientImports + '\n' + reactImports + '\n' + reactNativeImports + '\n\n' + graphqlOperation + '\n\n' + clientSetup + '\nfunction ' + (0, _capitalizeFirstLetter2.default)(operationName) + '() {\n  return (\n    ' + (options.client ? '<ApolloProvider client={apolloClient}>' : '') + '\n    ' + component + '\n    ' + (options.client ? '</ApolloProvider>' : '') + '\n  )\n}\n';

    return (0, _formatJavaScript2.default)(snippet);
  }
};