content: /* eslint-disable react/no-array-index-key */
  import React, { Component } from 'react';
  import styled from 'styled-components';
  import { Loader, Button, Form } from 'semantic-ui-react';
  import Layout from '../components/layout';
  import { loadProject, writeProjectConfig } from '../utils/projects';
  
  const Main = styled.div`
    padding: 24px;
  `;
  
  const StyledLoader = styled(Loader)`
    margin-top: 50px !important;
  `;
  
  export default class extends Component {
    state = { loading: true, project: null };
  
    componentDidMount() {
      const projectPath = localStorage.getItem('projectPath');
      const project = loadProject(projectPath);
      this.setState({
        project,
        loading: false,
      });
    }
  
    onChangeField = ({ target }) => {
      this.setState(({ project }) => {
        project[target.name] = target.value;
        return { project };
      });
    };
  
    onSubmit = (e) => {
      e.preventDefault();
      const { project } = this.state;
      const projectPath = localStorage.getItem('projectPath');
      writeProjectConfig(projectPath, project);
      new Notification('Saved');
    };
  
    render() {
      const { loading, project } = this.state;
      return (
        <Layout>
          <Main>
            {loading && <StyledLoader active inline="centered" />}
            {!loading &&
              <Form onSubmit={this.onSubmit}>
                <Form.Input
                  label="Project name"
                  placeholder="Name"
                  name="name"
                  required
                  value={project.name}
                  onChange={this.onChangeField}
                />
                <Button type="submit">Submit</Button>
              </Form>}
          </Main>
        </Layout>
      );
    }
  }
  