import React from 'react';

import SessionStore from '../Session/SessionStore';

import { CodePreview, Dialog } from '../../common/';
import { Card, CardTitle, CardText } from 'material-ui';

const ClassSummaryDialog = ({ item, hasEditMode }) => {
  const token = SessionStore.getToken();
  const currentInstance = SessionStore.getInstance();
  const stringSchemaFields = item && JSON.stringify(item.schema);
  const headingText = !hasEditMode ? 'Data Class you just created can always be modified later. ' : '';

  return (
    <div>
      <Dialog.ContentSection>
        <div className="col-flex-1">
          <div style={{ fontSize: 16, lineHeight: 1.6, color: 'rgba(68,68,68, .8)' }}>
            <p>
              {`${headingText}You can update the schema of the Data Class or edit its permissions. To do this,
              open your Dashboard, click on "Classes" in the left sidebar, and click the three dot edit button
              on the right side of the Data Class row.`}
            </p>
          </div>
        </div>
      </Dialog.ContentSection>
      <Dialog.ContentSection>
        <div className="col-flex-1">
          <Card>
            <CardTitle title="Use in your App" />
            <CardText>
              <p>Choose your favorite language below and copy the code.</p>
              <CodePreview>
                <CodePreview.Item
                  title="cURL"
                  languageClassName="markup"
                  code={`curl -X PATCH \\\n-H "X-API-KEY: ${token}" \\\n-H "Content-Type: application/json" ` +
                  `\\\n-d '{"schema":${stringSchemaFields}}' \\\n` +
                  `"${SYNCANO_BASE_URL}/v1.1/instances/${currentInstance.name}/classes/${item.name}"/`}
                />
                <CodePreview.Item
                  title="Python"
                  languageClassName="python"
                  code={`import syncano\nfrom syncano.models import Class\n\nsyncano.connect(api_key=` +
                  `'${token}')\n\nclass_instance = Class.please.get(instance_name='${currentInstance.name}', ` +
                  `name='${item.name}') \n\nclass_instance.schema.add(\n` +
                  `  ${stringSchemaFields.slice(1, -1).replace(/(},)/g, '},\n  ')}\n)\nclass_instance_save()`}
                />
                <CodePreview.Item
                  title="JavaScript"
                  languageClassName="javascript"
                  code={`var Syncano = require('syncano');\nvar connection = Syncano({accountKey: ` +
                  `'${token}'});\nvar Class = connection.Class;\n\nvar update = {\n  "schema": [\n    ` +
                  `${stringSchemaFields.slice(1, -1).replace(/(},)/g, '},\n    ')}\n  ]\n};\n\n` +
                  `Class\n  .please()\n  .update({name: '${item.name}', instanceName: '` +
                  `${currentInstance.name}'}, update)\n  .then(calback);`}
                />
              </CodePreview>
            </CardText>
          </Card>
        </div>
      </Dialog.ContentSection>
    </div>
  );
};

export default ClassSummaryDialog;

@@ -185,16 +185,340 @@
 l-ui';%0A%0A
+const handleSchemaFields = (schemaArray) =%3E %7B%0A  const schemaFormating = %7B%0A    curl: schemaArray,%0A    python: schemaArray.slice(1, -1).replace(/(%7D,)/g, '%7D,%5Cn  ').replace(/:true/g, ':True').replace(/:false/g, ':False'),%0A    javascript: schemaArray.slice(1, -1).replace(/(%7D,)/g, '%7D,%5Cn    ')%0A  %7D;%0A%0A  return schemaFormating;%0A%7D;%0A%0A
 const Cl
@@ -561,24 +561,24 @@
 ode %7D) =%3E %7B%0A
-
   const toke
@@ -829,16 +829,87 @@
  ' : '';
+%0A  const formatedSchemaFields = handleSchemaFields(stringSchemaFields);
 %0A%0A  retu
@@ -1974,22 +1974,24 @@
 hema%22:$%7B
-string
+formated
 SchemaFi
@@ -1994,16 +1994,21 @@
 maFields
+.curl
 %7D%7D' %5C%5C%5Cn
@@ -2563,22 +2563,24 @@
    %60  $%7B
-string
+formated
 SchemaFi
@@ -2588,47 +2588,14 @@
 lds.
-slice(1, -1).replace(/(%7D,)/g, '%7D,%5Cn  ')
+python
 %7D%5Cn)
@@ -2988,22 +2988,24 @@
      %60$%7B
-string
+formated
 SchemaFi
@@ -3013,49 +3013,18 @@
 lds.
-slice(1, -1).replace(/(%7D,)/g, '%7D,%5Cn    ')
+javascript
 %7D%5Cn 

Apply data class hotfix from master branch to devel