import React from 'react';
import { S3Client, ListBucketsCommand } from '@aws-sdk/client-s3';
import BucketList from './BucketList';
import './App.css';

type AppProps = {};

type AppState = {
  accessKeyId: string;
  secretAccessKey: string;
  client: S3Client | null;
};

class App extends React.Component<AppProps, AppState> {
  state = {
    accessKeyId: "GK31c2f218a2e44f485b94239e",
    secretAccessKey: "b892c0665f0ada8a4755dae98baa3b133590e11dae3bcc1f9d769d67f16c3835",
    client: null,
  };

  constructor(props: AppProps) {
    super(props);
  }

  handleChangeAccessKeyId = (e: React.FormEvent<HTMLInputElement>): void => {
    this.setState({accessKeyId: e.currentTarget.value});
  }

  handleChangeSecreteAccessKey = (e: React.FormEvent<HTMLInputElement>): void => {
    this.setState({secretAccessKey: e.currentTarget.value});
  }

  login = async (e: React.SyntheticEvent) => {
    e.preventDefault();
    console.log("Login with: ", this.state);
    let client = new S3Client({
      //endpoint: 'https://garage-staging.home.adnab.me',
      logger: console,
      // Necessary to write the full endpoint struct instead of endpoint: 'http://localhost:3811'
      // otherwise AWS SDK removes the port number from the signature, which is a bug:
      // https://github.com/aws/aws-sdk-js-v3/issues/1941
      endpoint: {
        protocol: 'http',
        hostname: 'localhost:3811',
        path: '/',
      },
      tls: false,
      credentials: {
          accessKeyId: this.state.accessKeyId,
          secretAccessKey: this.state.secretAccessKey,
      },
      forcePathStyle: true,
      region: 'us-east-1',
    });

    this.setState({client: client});
  };

  render() {
    if (this.state.client) {
      return (
        <BucketList client={ this.state.client } />
      );
    } else {
      return (
        <form onSubmit={this.login} >
          <p>Access key id: <input type="text" value={ this.state.accessKeyId } onChange={this.handleChangeAccessKeyId} /></p>
          <p>Secret access key: <input type="text" value={ this.state.secretAccessKey } onChange={this.handleChangeSecreteAccessKey} /></p>
          <p><input type="submit" value="Log in" /></p>
        </form>
      );
    }
  }
}

export default App;