text: import React from "react";
  import Header from "../Header/index";
  import axios from "../../axiosInterceptor"
  import env from "../../enviroment/envFrontEnd";
  import Swal from "sweetalert2"
  import bytes from "bytes";
  import moment from "moment"
  import capitalize from "../../utils/capitalize";
  import { resetCurrentRoute } from "../../actions/routes";
  import { setFolders } from "../../actions/folders";
  import { setQuickFiles } from "../../actions/quickFiles";
  import { hideSettings } from "../../actions/settings";
  import { startLogout, startLogoutAll } from "../../actions/auth";
  import { setFiles, startResetCache } from "../../actions/files";
  import {connect} from "react-redux"
  import { setParent } from "../../actions/parent";
  import uuid from "uuid"
  import InvoiceItem from "../InvoiceItem";
  import {setUpdateSettingsID} from "../../utils/updateSettings";
  import HomepageSpinner from "../HomepageSpinner";
  import { setLoading } from "../../actions/main";
  // import {updateSettingsID} from "../MainSection"
  // import { resetSettingsMain } from "../../actions/main";
  
  class SettingsPageContainer extends React.Component {
    
      constructor(props) {
          super(props);
  
          this.state = {
              sideBarOpen: false,
              mode: "general",
              loaded: false,
              userDetails: {},
              addS3AccountOpen: false,
              s3ID: "",
              s3Key: "",
              s3Bucket: "",
              addGoogleAccountOpen: false,
              googleID: "",
              googleSecret: "",
              invoiceData: {},
              invoices: [],
              invoicesLoaded: false,
              showChangePassword: false,
              oldPassword: "",
              newPassword: "",
              verifyNewPassword: "",
              showAddName: false,
              name: "",
              listView: true,
              dateSort: true,
              descendingSort: true,
              dropToUpload: true,
              doubleClickFolders: false,
              hideFolderTree: false,
              showFolderTreeScrollBars: false
          }
  
          this.uploadReference = React.createRef()
      }
  
      getUserDetails = () => {
  
          this.props.dispatch(setLoading(true));
  
          axios.get("/user-service/user-detailed").then((response) => {
            
              env.name = response.data.name;
              env.emailAddress = response.data.email
              this.props.dispatch(setParent(uuid.v4()))
  
              this.setState(() => {
                  return {
                      ...this.state,
                      loaded: true,
                      userDetails: response.data
                  }
              }, () => {
  
                // this.getInvoiceData();
                this.props.dispatch(setLoading(false))
  
              })
          }).catch((err) => {
  
            console.log("Loading user details error", err);
  
            Swal.fire({
              title: 'Error loading user account',
              text: 'There was an error loading your account, would you like to logout?',
              icon: 'warning',
              showCancelButton: true,
              confirmButtonText: 'Yes, logout',
              cancelButtonText: 'No'
            }).then((result) => {
  
              if (result.value) {
                console.log("Confirm logout");
  
                axios.post("/user-service/logout").then(() => {
                  window.location.assign(env.url);
                }).catch((e) => {
                  window.location.assign(env.url);
                })
              }
            
            })
          })
          
      }
  
      componentDidMount = () => {
          this.getUserDetails();
          this.setSettings();
  
          //console.log("env sub", this.state.userDetails.activeSubscription)
      }
  
      setSettings = () => {
  
        const gridMode = window.localStorage.getItem("grid-mode");
        const nameMode = window.localStorage.getItem("name-mode");
        const ascMode = window.localStorage.getItem("asc-mode");
        const dropToUpload = window.localStorage.getItem("non_drop-mode");
        const doubleClickFolders = window.localStorage.getItem("double-click-folders");
        const hideFolderTree = window.localStorage.getItem("hide-folder-tree");
        const showFolderTreeScrollBars = window.localStorage.getItem("show-folder-tree-scroll-bars")
  
        this.setState(() => {
          return {
            ...this.state,
            listView: !gridMode,
            dateSort: !nameMode,
            descendingSort: !ascMode,
            dropToUpload: !dropToUpload,
            doubleClickFolders: doubleClickFolders,
            hideFolderTree: hideFolderTree,
            showFolderTreeScrollBars
          }
        })
      }
  
      showSideBar = () => {
  
          this.setState(() => {
              return {
                  ...this.state,
                  sideBarOpen: !this.state.sideBarOpen
              }
          })
      }
  
      modeChangeFullScreen = (type) => {
       
          this.setState(() => {
              return {
                  ...this.state,
                  mode: type
              }
          })
      }
  
      modeChange = (type) => {
  
          this.setState(() => {
              return {
                  ...this.state,
                  mode: type
              }
          }, () => {
              this.showSideBar()
          })
          //this.showSideBar()
      }
  
      getProfilePicName = () => {
  
          if (!this.state.loaded) return "?";
  
          if (this.state.userDetails.name) {
              if (this.state.userDetails.name.length >= 1) {
                  return this.state.userDetails.name.substring(0, 1).toUpperCase();
              } else {
                  return "?"
              }
          } else if (this.state.userDetails.email.length >= 1) {
              return this.state.userDetails.email.substring(0,1).toUpperCase();
          } else {
              return "?"
          }
      }
  
      onChangeS3ID = (e) => {
  
          const value = e.target.value;
  
          this.setState(() => {
              return {
                  ...this.state,
                  s3ID: value
              }
          })
      }
  
      onChangeS3Bucket = (e) => {
  
          const value = e.target.value;
  
          this.setState(() => {
              return {
                  ...this.state,
                  s3Bucket: value
              }
          })
      }
  
      onChangeS3Key = (e) => {
  
          const value = e.target.value;
  
          this.setState(() => {
              return {
                  ...this.state,
                  s3Key: value
              }
          })
      }
  
      onChangeGoogleID = (e) => {
  
          const value = e.target.value;
  
          this.setState(() => {
              return {
                  ...this.state,
                  googleID: value
              }
          })
      }
  
      onChangeGoogleSecret = (e) => {
  
          const value = e.target.value;
  
          this.setState(() => {
              return {
                  ...this.state,
                  googleSecret: value
              }
          })
      }
  
      showS3Account = () => {
  
          this.setState(() => {
              return {
                  ...this.state,
                  addS3AccountOpen: !this.state.addS3AccountOpen
              }
          })
      }
  
      showGoogleAccount = () => {
  
          this.setState(() => {
              return {
                  ...this.state,
                  addGoogleAccountOpen: !this.state.addGoogleAccountOpen
              }
          })
      }
  
      submitS3Account = (e) => {
  
          e.preventDefault()
  
          const data = {
              id: this.state.s3ID,
              bucket: this.state.s3Bucket,
              key: this.state.s3Key
          }
  
          axios.post("/user-service/add-s3-storage", data).then((response) => {
  
              Swal.fire(
                  'S3 Account Added',
                  'Amazon S3 Account has been linked with myDrive',
                  'success'
                ).then(() => {
                    //window.location.assign(env.url);
                    env.s3Enabled = true;
  
                    this.getUserDetails()
                    this.showS3Account()
                  //   let newUser = this.state.userDetails;
                  //   newUser = {...newUser, s3Enabled: true}
                })
  
          }).catch((err) => {
              Swal.fire({
                icon: 'error',
                title: 'Add S3 Account Error',
                text: 'Invalid S3 Credentials',
              })
          })
      }
  
      getInvoiceData = () => {
  
        if (!env.commercialMode || !this.state.userDetails.activeSubscription) return;
  
        axios.get("/user-service/payments").then((response) => {
    
          const invoices = response.data.invoices;
  
          let invoiceDetails = response.data;
          //delete invoiceDetails.invoices;
  
          this.setState(() => {
            return {
              ...this.state, 
              invoiceData: invoiceDetails,
              invoices, 
              invoicesLoaded: true}
          })
  
        }).catch((e) => {
          console.log("invoice err", e)
        })
  
      }
  
      removeS3Account = (e) => {
  
          if (e) e.preventDefault();
  
          Swal.fire({
              title: 'Remove S3 Account?',
              text: "This will unlink your Amazon S3 Account from myDrive.",
              icon: 'warning',
              showCancelButton: true,
              confirmButtonColor: '#3085d6',
              cancelButtonColor: '#d33',
              confirmButtonText: 'Yes, remove account'
            }).then((result) => {
              if (result.value) {
  
                axios.delete('/user-service/remove-s3-storage').then((response) => {
  
                  let newUser = this.state.userDetails;
                  delete newUser.s3Enabled;
  
                  env.s3Enabled = undefined;
                  this.setState(() => {
                      return {
                          ...this.state,
                          userDetails: newUser
                      }
                  })
  
                  this.showS3Account()
                  Swal.fire(
                      'S3 Account Removed',
                      'Your Amazon S3 Account has been unlinked from myDrive',
                      'success'
                  )
  
                }).catch((err) => {
                    console.log("could not remove google account", err);
                })
  
  
              }
            })
      }
  
      refreshStorageSize = () => {
        
          axios.patch("/user-service/refresh-storage-size", undefined).then((response) => {
  
              this.getUserDetails()
  
          }).catch((err) => {
              console.log("refresh storage error")
          })
      }
  
      submitGoogleAccount = (e) => {
  
        e.preventDefault()
  
        const clientID = this.state.googleID;
        const clientKey = this.state.googleSecret;
        const clientRedirect = "/add-google-account"
  
        const data = {
            clientID, 
            clientKey,
            clientRedirect
        }
  
        axios.post("/user-service/create-google-storage-url", data).then((response) => {
  
            const googleURL = response.data
  
            window.location.assign(googleURL)
  
        }).catch((err) => {
            console.log("create url error", err)
        })
      }
  
      removeGoogleAccount = (e) => {
  
        e.preventDefault();
  
        axios.delete('/user-service/remove-google-storage').then((response) => {
  
          env.googleDriveEnable = undefined;
          this.showGoogleAccount();
          this.getUserDetails();
            Swal.fire(
              'Google Account Removed',
              'Your Google Account has been unlinked from myDrive',
              'success'
          ).then(() => {
              // window.location.assign(env.url)
              
          })
        })
      }
  
      getStoragePercentage = () => {
  
        let value = Math.floor((this.state.userDetails.storageData.storageSize / this.state.userDetails.storageData.storageLimit) * 100);
  
        if (value < 0) value = 0;
        if (value > 100) value = 100;
  
        return value;
      }
  
      getStoragePercentageGoogle = () => {
        let value = Math.floor((this.state.userDetails.storageDataGoogle.storageSize / this.state.userDetails.storageDataGoogle.storageLimit) * 100);
  
        if (value < 0) value = 0;
        if (value > 100) value = 100;
  
        return value;
      }
  
      launchStoragePage = () => {
  
        window.location.assign(env.url+"/add-storage")
      }
  
      logout = () => {
  
        this.props.dispatch(resetCurrentRoute())
        this.props.dispatch(setFolders([]));
        this.props.dispatch(setFiles([]));
        this.props.dispatch(setQuickFiles([]));
        this.props.dispatch(hideSettings())
        this.props.dispatch(startLogout())
    }
  
    logoutAll = () => {
  
        this.props.dispatch(resetCurrentRoute())
        this.props.dispatch(setFolders([]));
        this.props.dispatch(setFiles([]));
        this.props.dispatch(setQuickFiles([]));
        this.props.dispatch(hideSettings());
        this.props.dispatch(startLogoutAll());
    }
  
    changeShowChangePassword = () => {
  
      this.setState(() => {
        return {
          ...this.state,
          showChangePassword: !this.state.showChangePassword,
          oldPassword: "",
          newPassword: "",
          verifyNewPassword: ""
        }
      })
    }
  
    goHome = () => {
      window.location.assign(env.url)
    }
  
    onChangeOldPassword = (e) => {
  
      const value = e.target.value;
  
      this.setState(() => {
          return {
              ...this.state,
              oldPassword: value
          }
      })
    }
  
    onChangeNewPassword = (e) => {
  
      const value = e.target.value;
  
      this.setState(() => {
          return {
              ...this.state,
              newPassword: value
          }
      })
    }
  
    onChangeVerifyNewPassword = (e) => {
  
      const value = e.target.value;
  
      this.setState(() => {
          return {
              ...this.state,
              verifyNewPassword: value
          }
      })
    }
  
    submitPasswordChange = (e) => {
  
      e.preventDefault()
  
      if (this.state.oldPassword.length === 0 || this.state.newPassword.length === 0 || this.state.verifyNewPassword.length === 0) {
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'Enter All Required Fields',
        })
      }
  
      if (this.state.verifyNewPassword !== this.state.newPassword) {
  
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'New passwords do not match',
        })
        return;
      }
  
      const data = {
        newPassword: this.state.newPassword,
        oldPassword: this.state.oldPassword
      }
  
      axios.post(`/user-service/change-password/`, data).then((results) => {
                      
        //const newToken = results.data;
        // window.localStorage.setItem("token", newToken);
  
        this.changeShowChangePassword()
        //this.getUserDetails()
  
        Swal.fire(
            'Password Changed',
            'All other sessions have been logged out',
            'success'
          )
  
  
      }).catch((err) => {
          console.log(err)
          Swal.fire({
              icon: 'error',
              title: 'Error',
              text: 'Error changing password',
            })
      })
  
    }
  
    onChangeAddName = (e) => {
  
      const value = e.target.value;
  
      this.setState(() => {
          return {
              ...this.state,
              name: value
          }
      })
    }
  
    doubleClickOnChange = (e) => {
  
      if (this.state.doubleClickFolders) {
        localStorage.removeItem("double-click-folders");
      } else {
        localStorage.setItem("double-click-folders", "true");
      }
  
      this.setState(() => {
        return {
          ...this.state,
          doubleClickFolders: !this.state.doubleClickFolders
        }
      })
  
      //this.props.dispatch(resetSettingsMain(uuid.v4()));
      // updateSettingsID = uuid.v4();
      // setUpdateSettingsID(uuid.v4());
    }
  
    changeShowAddName = () => {
  
      this.setState(() => {
        return {
          ...this.state,
          showAddName: !this.state.showAddName,
          name: ""
        }
      })
    }
  
    submitAddName = (e) => {
  
      e.preventDefault()
  
      if (this.state.name.length === 0) return;
  
      const data = {
        name: this.state.name
      }
  
      axios.patch("/user-service/add-name", data).then((response) => {
        
        this.changeShowAddName();
        this.getUserDetails()
        Swal.fire(
          'Name Updated',
          'Your name has been sucessfully updated',
          'success'
        )
      
      }).catch(() => {
        console.log("could not change name")
        Swal.fire({
          icon: 'error',
          title: 'Error',
          text: 'Error changing name',
        })
      })
    }
  
    goHome = () => {
      window.location.assign(env.url)
    }
  
    downloadPersonalFileList = (e) => {
  
      e.preventDefault()
  
      axios.post('/user-service/get-token').then((response) => {
  
        const finalUrl = `/user-service/download-personal-file-list`;
  
        const link = document.createElement('a');
        document.body.appendChild(link);
        link.href = finalUrl;
        link.setAttribute('type', 'hidden');
        link.setAttribute("download", true);
        link.click();
      })
    }
  
    uploadPersonalFileList = (e) => {
  
      e.preventDefault();
  
      if (this.uploadReference.current.files && this.uploadReference.current.files[0]) {
  
        const currentFile = this.uploadReference.current.files[0];
  
        const config = {
          headers: {
          'Content-Type': 'application/json'
          }
        }
        
        axios.post('/user-service/upload-personal-file-list', currentFile, config).then((response) => {
                 
          this.uploadReference.current.value = ''
  
          Swal.fire(
            'Personal Data Uploaded',
            'Your Peronsal Metadata has been uploaded to myDrive successfully',
            'success'
          )
  
        }).catch((err) => {
          console.log("upload personal file list error", err);
          Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'Error uploading personal file list',
          })
        }) 
        
      }
      
    }
  
    removeS3Metadata = (e) => {
      e.preventDefault();
  
      Swal.fire({
        title: 'Remove S3 Metadata?',
        text: "This will remove all S3 Metadata from myDrive, please download your metadata list before removing.",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Yes, remove metadata'
      }).then((result) => {
        if (result.value) {
  
          axios.delete("/user-service/remove-s3-metadata").then((response) => {
  
            Swal.fire(
              'S3 Metadata removed',
              'Your S3 metadata has been removed from myDrive successfully.',
              'success'
            )
          }).catch((err) => {
            console.log("delete s3 data err", err);
            Swal.fire({
              icon: 'error',
              title: 'Error',
              text: 'Error deleting S3 metadata',
            })
          })
          
        }
      })
    }
  
    listViewOnChange = (e) => {
  
      if (this.state.listView) {
        window.localStorage.setItem("grid-mode", true);
      } else {
        window.localStorage.removeItem("grid-mode");
      }
  
      this.setState(() => {
        return {
          ...this.state,
          listView: !this.state.listView
        }
      })
  
      // this.setSettings();
    }
  
    sortByDateChange = () => {
  
      if (this.state.dateSort) {
        window.localStorage.setItem("name-mode", true);
      } else {
        window.localStorage.removeItem("name-mode")
      }
  
      this.setState(() => {
        return {
          ...this.state,
          dateSort: !this.state.dateSort
        }
      })
    }
  
    sortByDescendingChange = () => {
  
      if (this.state.descendingSort) {
        window.localStorage.setItem("asc-mode", true);
      } else {
        window.localStorage.removeItem("asc-mode")
      }
  
      this.setState(() => {
        return {
          ...this.state,
          descendingSort: !this.state.descendingSort
        }
      })
    }
  
    dropOnChange = () => {
  
      if (this.state.dropToUpload) {
        window.localStorage.setItem("non_drop-mode", true)
      } else {
        window.localStorage.removeItem("non_drop-mode");
      }
  
      this.setState(() => {
        return {
          ...this.state,
          dropToUpload: !this.state.dropToUpload
        }
      })
    }
  
    hideFolderTreeOnChange = () =>{
  
      if (this.state.hideFolderTree) {
  
        window.localStorage.removeItem("hide-folder-tree");
  
      } else {
  
        console.log("setting hide folder tree to true")
  
        window.localStorage.setItem("hide-folder-tree", true);
      }
      
      this.setState(() => ({
        ...this.state,
        hideFolderTree: !this.state.hideFolderTree
      }))
  
    }
  
    showFolderTreeScrollBarsOnChange = () => {
  
      if (this.state.showFolderTreeScrollBars) {
  
        window.localStorage.removeItem("show-folder-tree-scroll-bars");
  
      } else {
  
        window.localStorage.setItem("show-folder-tree-scroll-bars", true);
      }
  
      this.setState(() => ({
        ...this.state,
        showFolderTreeScrollBars: !this.state.showFolderTreeScrollBars
      }))
  
    }
  
    render() {
  
      if (this.props.loading) {
        return <HomepageSpinner />
      }
  
      return (
  
          <div>
  
              <div class="main__wrapper">
  
  <div onClick={this.showSideBar} class="overlay" style={this.state.sideBarOpen ? {display: "block"} : {display:"none"}}></div>
  
  <Header goHome={this.goHome}/>
  
  <div class="main__wrapper--container settings__container" style={this.props.loading ? {display: "none"} : {}}>
    <div class="menu__block" style={this.state.sideBarOpen ? {left: "0px"} : {left:"-250px"}}>
      <div class="file__settings">
        <div class="back__button">
          <a onClick={this.goHome}>
            <span>
              <img src="/assets/backarrow.svg" alt="backarrow" />
            </span>{" "}
            BACK TO FILES
          </a>
        </div>
        <div class="settings__menu">
          <ul>
            <li
              class={this.state.mode === "general" ? "active__settings" : ""}
              data-settings="general__settings"
            >
              <a onMouseDown={() => this.modeChange("general")}>General</a>
            </li>
            <li class={this.state.mode === "storage" ? "active__settings" : ""} data-settings="storage__accounts">
              <a onMouseDown={() => this.modeChange("storage")}>Storage accounts</a>
            </li>
            <li style={env.commercialMode ? {display: "block"} : {display:"none"}} class={this.state.mode === "billing" ? "active__settings" : ""} data-settings="billing__settings">
              <a onMouseDown={() => this.modeChange("billing")}>Billing & payments</a>
            </li>
            <li class={this.state.mode === "notifications" ? "active__settings" : ""} data-settings="notification__settings">
              <a onMouseDown={() => this.modeChange("notifications")}>Settings</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="menu__block">
      <div class="file__settings">
        <div class="back__button">
          <a onClick={this.goHome}>
            <span>
              <img src="/assets/backarrow.svg" alt="backarrow" />
            </span>{" "}
            BACK TO FILES
          </a>
        </div>
        <div class="settings__menu">
          <ul>
            <li
              class={this.state.mode === "general" ? "active__settings" : ""}
              data-settings="general__settings"
            >
              <a onMouseDown={() => this.modeChangeFullScreen("general")}>General</a>
            </li>
            <li class={this.state.mode === "storage" ? "active__settings" : ""} data-settings="storage__accounts">
              <a onMouseDown={() => this.modeChangeFullScreen("storage")}>Storage accounts</a>
            </li>
            <li style={env.commercialMode ? {display: "block"} : {display:"none"}} class={this.state.mode === "billing" ? "active__settings" : ""} data-settings="billing__settings">
              <a onMouseDown={() => this.modeChangeFullScreen("billing")}>Billing & payments</a>
            </li>
            <li class={this.state.mode === "notifications" ? "active__settings" : ""} data-settings="notification__settings">
              <a onMouseDown={() => this.modeChangeFullScreen("notifications")}>Settings</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <div class="content__block">
      <div class="small__switcher--content">
        <a onClick={this.showSideBar} class="menu__button">
          <i class="fas fa-bars"></i>
        </a>
        {/* <a href="#" class="image__viewer">
          <i class="fas fa-images"></i>
        </a> */}
      </div>
      <div class="main__settings--block">
        <div class="inner__settings general__settings" style={this.state.mode === "general" ? {display:"block"} : {display:"none"}}>
          <div class="elem__settings">
            <div class="head__settings">
              <h2>Personal info</h2>
            </div>
            <div class="elem__control--settings">
              <div class="control__title">
                <p>Profile picture</p>
              </div>
              <div class="control__value">
                <div class="profile__picture">
                  <p style={{backgroundColor:"#3c85ee"}}>
                    <span style={{color:"#fff"}}>{this.getProfilePicName()}</span>
                  </p>
                </div>
              </div>
              <div class="value__updater">
                {/* <a href="#">Upload</a> */}
              </div>
            </div>
            <div class="elem__control--settings">
              <div class="control__title">
                <p>Name</p>
              </div>
              <div class="control__value">
                <p>{this.state.loaded ? this.state.userDetails.name ? capitalize(this.state.userDetails.name) : "No Name Set" : "Loading..."}</p>
              </div>
              <div class="value__updater">
                <a onClick={this.changeShowAddName}>Change</a>
              </div>
            </div>
          </div>
          <div class="elem__settings">
            <div class="head__settings">
              <h2>Security</h2>
            </div>
            <div class="elem__control--settings">
              <div class="control__title">
                <p>Logout Account</p>
              </div>
              <div class="control__value">
                  <p></p>
              </div>
              <div class="value__updater">
                <a onClick={this.logout}>Logout</a>
              </div>
            </div>
            <div class="elem__control--settings">
              <div class="control__title">
                <p>Email</p>
              </div>
              <div class="control__value">
                  <p>{this.state.loaded ? this.state.userDetails.email : "Loading..."}</p>
              </div>
              <div class="value__updater">
                {/* <a href="#">Change</a> */}
              </div>
            </div>
  
            <div class="elem__control--settings">
              <div class="control__title">
                <p>Password</p>
              </div>
              <div class="control__value">
                <p>{this.state.loaded ? this.state.userDetails.passwordLastModified ? `Updated ${moment(this.state.userDetails.passwordLastModified).calendar()}` : "Password Not Updated Yet" : "Loading..."}</p>
              </div>
              <div class="value__updater">
                <a
                  onClick={this.changeShowChangePassword}
                  class="modal__button"
                  data-modal="password__modal"
                >
                  Change
                </a>
              </div>
            </div>
  
            <div class="elem__control--settings">
              <div class="control__title">
                <p>Logout All Accounts</p>
              </div>
              <div class="control__value">
                  <p></p>
              </div>
              <div class="value__updater">
                <a onClick={this.logoutAll}>Logout All</a>
              </div>
            </div>
            {/* <div class="elem__control--settings">
              <div class="control__title">
                <p>Two factor authentication</p>
              </div>
              <div class="control__value">
                <p>Disabled</p>
              </div>
              <div class="value__updater">
                <a href="#">Enable</a>
              </div>
            </div> */}
          </div>
  
          <div class="elem__settings" style={{display:"none"}}>
            <div class="head__settings">
              <h2>Preferences</h2>
            </div>
            <div class="elem__control--settings">
              <div class="control__title">
                <p>Language</p>
              </div>
              <div class="control__value">
                <p>English</p>
              </div>
              <div class="value__updater">
                <a href="#">Change</a>
              </div>
            </div>
            <div class="elem__control--settings">
              <div class="control__title">
                <p>Date format</p>
              </div>
              <div class="control__value">
                <p>MM / DD / YYYY</p>
              </div>
              <div class="value__updater">
                <a href="#">Change</a>
              </div>
            </div>
  
            <div class="elem__control--settings">
              <div class="control__title">
                <p>Date Time zone</p>
              </div>
              <div class="control__value">
                <p>GMT +7</p>
              </div>
              <div class="value__updater">
                <a href="#">Change</a>
              </div>
            </div>
          </div>
        </div>
        <div
          class="inner__settings storage__accounts"
          style={this.state.mode === "storage" ? {display:"block"} : {display:"none"}}
        >
          <div class="elem__settings">
            <div class="head__settings">
              <h2>Storage Accounts</h2>
            </div>
            <div class="elem__control--settings storage__control">
              <div class="active__storage">
                <div class="control__title">
                  <div class="double__title">
                    <p>{env.commercialMode ? "myDrive" : "Local Storage"}</p>
                    <span>{!this.state.loaded ? "Loading..." : (env.commercialMode && this.state.userDetails.activeSubscription) ? "Plan Type" : ""}</span>
                  </div>
                </div>
                <div class="control__value">
                  <div class="available__space--wrap">
                    <div class="space__bar" style={!this.state.loaded ? {} : (env.commercialMode && !this.state.userDetails.activeSubscription) ? {display:"none"} : {display:"block"}}>
                      <div
                        class="active__space--bar"
                        style={{backgroundColor:"#3c85ee",width: !this.state.loaded ? "0%" : env.commercialMode ? this.state.userDetails.activeSubscription ? `${this.getStoragePercentage()}%` : `100%` : "100%"}}
                      ></div>
                    </div>
                    <span>{!this.state.loaded ? "Loading..." : 
                    (env.commercialMode && this.state.userDetails.activeSubscription) ? 
                    `${bytes(this.state.userDetails.storageData.storageSize)} of 
                    ${bytes(this.state.userDetails.storageData.storageLimit)} used` : !env.commercialMode ? `${bytes(this.state.userDetails.storageData.storageSize)} used` : ''}</span>
                  </div>
                </div>
                <div class="value__updater">
                  <a onClick={env.commercialMode ? this.launchStoragePage : this.refreshStorageSize}>{env.commercialMode ? "Upgrade" : "Refresh"}</a>
                </div>
              </div>
              <div class="more__space" style={{display:"none"}}>
                <p>
                  <img src="/assets/star.svg" alt="star" />{" "}
                  <span>Earn more free space.</span> Get an additional
                  10GB of storage for every friend you invite.
                </p>
                <a href="#">Invite Friends</a>
              </div>
            </div>
            <div class="elem__control--settings">
              <div class="control__title">
                <div class="double__title">
                  <p>Google Drive</p>
                  <span>{!this.state.loaded ? "Loading..." : this.state.userDetails.googleDriveEnabled ? this.state.userDetails.googleDriveData.id : "No Google Account"}</span>
                </div>
              </div>
              <div class="control__value">
                <div class="available__space--wrap">
                  <div class="space__bar" style={!this.state.loaded ? {} : this.state.userDetails.googleDriveEnabled ? {display:"block"} : {display:"none"}}>
                    <div
                      class="active__space--bar"
                      style={{backgroundColor:"#3c85ee", width: !this.state.loaded ? "0%" : this.state.userDetails.googleDriveEnabled ? `${this.getStoragePercentageGoogle()}%` : '0%'}}
                    ></div>
                  </div>
                  <span>{this.state.userDetails.googleDriveEnabled ? !this.state.userDetails.storageDataGoogle.failed ? `${bytes(this.state.userDetails.storageDataGoogle.storageSize)} of 
                    ${bytes(this.state.userDetails.storageDataGoogle.storageLimit)} used` : "Failed" : ""}
                  </span>
                </div>
              </div>
              <div class="value__updater">
                <a onClick={this.showGoogleAccount}>{!this.state.loaded ? "Loading..." : this.state.userDetails.googleDriveEnabled ? "Edit" : "Add"}</a>
              </div>
            </div>
            
            <div class="elem__control--settings">
              <div class="control__title">
                <div class="double__title">
                  <p>Amazon S3</p>
                  <span>{!this.state.loaded ? "Loading..." : this.state.userDetails.s3Enabled ? this.state.userDetails.s3Data.bucket : "S3 Not Enabled"}</span>
                </div>
              </div>
              <div class="control__value" style={!this.state.loaded ? {} : this.state.userDetails.s3Enabled ? {display:"block"} : {display:"none"}}>
                <div class="available__space--wrap">
                  <div class="space__bar">
                    <div
                      class="active__space--bar"
                      style={{backgroundColor:"#3c85ee", width:"100%"}}
                    ></div>
                  </div>
                  <span>{this.state.userDetails.s3Enabled ? !this.state.userDetails.storageDataPersonal.failed ? 
                  `${bytes(this.state.userDetails.storageDataPersonal.storageSize)} used` : "Failed" : ""}</span>
                </div>
              </div>
              <div class="value__updater">
                <a onClick={this.showS3Account}>{!this.state.loaded ? "Loading..." : this.state.userDetails.s3Enabled ? "Edit" : "Add"}</a>
              </div>
            </div>
          </div>
          <div class="elem__settings more__accounts" style={{display:"none"}}>
            <div class="head__settings">
              <h2>Add more accounts</h2>
            </div>
            <div style={{display:"flex", flexDirection:"row", justifyContent:"center", alignItems:"center"}}>
              <p>More Storage Options Coming Soon!</p>
            </div>
            <div class="elem__control--settings">
              <div class="control__title">
                <p>BackBlaze</p>
              </div>
              <div class="value__updater">
                <a href="#">Enable</a>
              </div>
            </div>
            <div class="elem__control--settings">
              <div class="control__title">
                <p>Sia Network</p>
              </div>
              <div class="value__updater">
                <a href="#">Enable</a>
              </div>
            </div>
            <div class="elem__control--settings">
              <div class="control__title">
                <p>Localhost</p>
              </div>
              <div class="value__updater">
                <a href="#">Enable</a>
              </div>
            </div>
          </div>
        </div>
  
        <div
          class="inner__settings billing__settings"
          style={this.state.mode === "billing" ? {display:"block"} : {display:"none"}}
        >
          <div class="elem__settings">
            <div class="head__settings">
              <h2>Payment</h2>
            </div>
            <div class="elem__control--settings">
              <div class="control__title">
                <p>Payment method</p>
              </div>
              <div class="control__value">
                <p>{(this.state.loaded && this.state.invoicesLoaded) ? 
                !this.state.invoiceData.card ? "No Payment Method" : 
                `${this.state.invoiceData.card.brand} ending in ${this.state.invoiceData.card.last4}` : "No Payment Method"}</p>
              </div>
              <div class="value__updater">
                <a onClick={this.launchStoragePage}>Change</a>
              </div>
            </div>
            <div class="elem__control--settings">
              <div class="control__title">
                <p>Billing cycle</p>
              </div>
              <div class="control__value">
                <p>{(this.state.loaded && this.state.invoicesLoaded) ? 
                !this.state.invoiceData.subscription ? "No Subscription" : 
                capitalize(this.state.invoiceData.subscription.plan.interval) : "No Subscription"}</p>
              </div>
              <div class="value__updater">
                <a onClick={this.launchStoragePage}>Change</a>
              </div>
            </div>
          </div>
          <div class="elem__settings">
            <div class="head__settings">
              <h2>History</h2>
            </div>
            <div class="history__table">
              <table>
  
                  <tr>
                      <th class="date__history">DATE</th>
                      <th class="plan__history">PLAN</th>
                      <th class="amount__history">AMOUNT</th>
                      <th class="status__history">STATUS</th>
                      <th></th>
                  </tr>
  
                {(!this.state.loaded || !this.state.invoicesLoaded) ? undefined : this.state.invoices.map((currentInvoice) => {
  
                  return <InvoiceItem currentInvoice={currentInvoice}/>
  
                })}
                {/* <tr>
                  <td class="date__history">May 1, 2020</td>
                  <td class="plan__history">myDrive Standard Plan</td>
                  <td class="amount__history">$9.99</td>
                  <td class="status__history unpaid">Unpaid</td>
                  <td>
                    <a href="#">Invoice</a>
                  </td>
                </tr>
                <tr>
                  <td class="date__history">May 1, 2020</td>
                  <td class="plan__history">myDrive Standard Plan</td>
                  <td class="amount__history">$9.99</td>
                  <td class="status__history paid">Paid</td>
                  <td>
                    <a href="#">Receipt</a>
                  </td>
                </tr>
                <tr>
                  <td class="date__history">May 1, 2020</td>
                  <td class="plan__history">myDrive Standard Plan</td>
                  <td class="amount__history">$9.99</td>
                  <td class="status__history paid">Paid</td>
                  <td>
                    <a href="#">Receipt</a>
                  </td>
                </tr> */}
              </table>
            </div>
          </div>
        </div>
  
        <div
          class="inner__settings notification__settings"
          style={this.state.mode === "notifications" ? {display:"block"} : {display:"none"}}
        >
          <div class="elem__settings">
            <div class="head__settings">
              <h2>Customization</h2>
            </div>
            <div class="settings__switchers">
              <span>Set Defaults</span>
              <p>
                <input checked={this.state.listView} onChange={this.listViewOnChange} type="checkbox" id="test1" />
                <label for="test1">List Style</label>
              </p>
              <p>
                <input checked={this.state.dateSort} onChange={this.sortByDateChange} type="checkbox" id="test2" />
                <label for="test2">
                  Sort By Date
                </label>
              </p>
              <p>
                <input checked={this.state.descendingSort} onChange={this.sortByDescendingChange} type="checkbox" id="test3" />
                <label for="test3">
                  Descending Order
                </label>
              </p>
              <p>
                <input checked={this.state.dropToUpload} onChange={this.dropOnChange} type="checkbox" id="test4" />
                <label for="test4">Drag And Drop To Upload</label>
              </p>
              <p>
                <input checked={this.state.doubleClickFolders} onChange={this.doubleClickOnChange} type="checkbox" id="test5" />
                <label for="test5">Double Click To Enter Folders On Mobile</label>
              </p>
              <p>
                <input checked={this.state.hideFolderTree} onChange={this.hideFolderTreeOnChange} type="checkbox" id="test6" />
                <label for="test6">Hide Folder Tree</label>
              </p>
              <p>
                <input checked={this.state.showFolderTreeScrollBars} onChange={this.showFolderTreeScrollBarsOnChange} type="checkbox" id="test7" />
                <label for="test7">Show Folder Tree Scroll Bars</label>
              </p>
            </div>
          </div>
  
          {/* <div class="elem__settings">
            <div class="head__settings">
              <h2>Marketing</h2>
            </div>
            <div class="settings__switchers">
              <span>Email me about</span>
              <p>
                <input type="checkbox" id="test4" />
                <label for="test4">New features and updates</label>
              </p>
              <p>
                <input type="checkbox" id="test5" />
                <label for="test5">Tips on using myDrive</label>
              </p>
              <p>
                <input type="checkbox" id="test6" />
                <label for="test6">
                  Feedback surveys to help improve myDrive
                </label>
              </p>
            </div>
          </div> */}
        </div>
      </div>
    </div>
  </div>
  </div>
  
      <div class="modal__wrap" style={this.state.addS3AccountOpen ? {display:"block"} : {display:"none"}}>
              <div class="inner__modal">
                  <div class="password__modal">
                      <div class="head__password">
                          <h2>{!this.state.loaded ? "Loading..." : this.state.userDetails.s3Enabled ? "Edit Amazon S3 Account" : "Add Amazon S3 Account"}</h2>
                          <div class="close__modal">
                              <a onClick={this.showS3Account}><img src="/assets/close.svg" alt="close"/></a>
                          </div>
                      </div>
                      <div class="password__content">
                          <form onSubmit={!this.state.loaded ? this.submitS3Account : this.state.userDetails.s3Enabled ? this.removeS3Account : this.submitS3Account}>
                              <div class="group__password" style={!this.state.loaded ? {} : this.state.userDetails.s3Enabled ? {display:"none"} : {display:"block"}}>
                                  <input value={this.state.s3ID} onChange={this.onChangeS3ID} placeholder="S3 ID"/>
                              </div>
                              <div class="group__password" style={!this.state.loaded ? {} : this.state.userDetails.s3Enabled ? {display:"none"} : {display:"block"}}>
                                  <input value={this.state.s3Bucket} onChange={this.onChangeS3Bucket} placeholder="S3 Bucket"/>
                              </div>
                              <div class="group__password" style={!this.state.loaded ? {} : this.state.userDetails.s3Enabled ? {display:"none"} : {display:"block"}}>
                                  <input value={this.state.s3Key} onChange={this.onChangeS3Key} type="password" placeholder="S3 Key"/>
                              </div>
                              <div class="password__submit">
                                  <input type="submit" value={!this.state.loaded ? "Loading..." : this.state.userDetails.s3Enabled ? "Remove Account" : "Add Account"}/>
                              </div>
                          </form>
                          <form onSubmit={this.downloadPersonalFileList} style={!this.state.loaded ? {display:"none"} : this.state.userDetails.s3Enabled ? {display:"block", marginTop: "13px"} : {display:"none"}}>
                              <div class="password__submit">
                                  {/* <input onClick={this.downloadPersonalFileList} value="Download S3 File List"/> */}
                                  <button>Download S3 Metadata List</button>
                              </div>
                          </form>
                          <form style={!this.state.loaded ? {display:"none"} : this.state.userDetails.s3Enabled ? {display:"block", marginTop: "13px"} : {display:"none"}}>
                              <div class="password__submit">
                                <div>
                                  <input ref={this.uploadReference} onChange={this.uploadPersonalFileList} type="file" multiple={false}/>
                                  <p>Upload S3 Metadata List</p>
                                </div>
                                  {/* <input onClick={this.downloadPersonalFileList} value="Download S3 File List"/> */}
                                  
                              </div>
                          </form>
                          <form onSubmit={this.removeS3Metadata} style={!this.state.loaded ? {display:"none"} : this.state.userDetails.s3Enabled ? {display:"block", marginTop: "13px"} : {display:"none"}}>
                              <div class="password__submit">
                                  {/* <input onClick={this.downloadPersonalFileList} value="Download S3 File List"/> */}
                                  <button>Delete S3 Metadata</button>
                              </div>
                          </form>
                      </div>
                  </div>
              </div>
          </div>
  
          <div class="modal__wrap" style={this.state.addGoogleAccountOpen ? {display:"block"} : {display:"none"}}>
              <div class="inner__modal">
                  <div class="password__modal">
                      <div class="head__password">
                          <h2>{!this.state.loaded ? "Loading..." : this.state.userDetails.googleDriveEnabled ? "Remove Google Drive Account" : "Add Google Drive Account"}</h2>
                          <div class="close__modal">
                              <a onClick={this.showGoogleAccount}><img src="/assets/close.svg" alt="close"/></a>
                          </div>
                      </div>
                      <div class="password__content">
                          <form onSubmit={!this.state.loaded ? this.submitGoogleAccount : this.state.userDetails.googleDriveEnabled ? this.removeGoogleAccount : this.submitGoogleAccount}>
                              <div class="group__password" style={!this.state.loaded ? {} : this.state.userDetails.googleDriveEnabled ? {display:"none"} : {display:"block"}}>
                                  <input value={this.state.googleID} onChange={this.onChangeGoogleID} placeholder="Drive Client ID"/>
                              </div>
                              <div class="group__password" style={!this.state.loaded ? {} : this.state.userDetails.googleDriveEnabled ? {display:"none"} : {display:"block"}}>
                                  <input value={this.state.googleSecret} onChange={this.onChangeGoogleSecret} type="password" placeholder="Drive Client Secret"/>
                              </div>
                              <div class="password__submit">
                                  <input type="submit" value={!this.state.loaded ? "Loading..." : this.state.userDetails.googleDriveEnabled ? "Remove Account" : "Add Account"}/>
                              </div>
                          </form>
                      </div>
                  </div>
              </div>
          </div>
  
          <div class="modal__wrap" style={this.state.showChangePassword ? {display:"block"} : {display:"none"}}>
            <div class="inner__modal">
              <div class="password__modal">
                <div class="head__password">
                  <h2>Update password</h2>
                  <div class="close__modal">
                    <a onClick={this.changeShowChangePassword}><img src="/assets/close.svg" alt="close"/></a>
                  </div>
                </div>
                <div class="password__content">
                  <form onSubmit={this.submitPasswordChange}>
                  <div class="group__password">
                      <input onChange={this.onChangeOldPassword} value={this.state.oldPassword} type="password" placeholder="Old password"/>
                    </div>
                    <div class="group__password">
                      <input onChange={this.onChangeNewPassword} value={this.state.newPassword} type="password" placeholder="New password"/>
                    </div>
                    <div class="group__password">
                      <input onChange={this.onChangeVerifyNewPassword} value={this.state.verifyNewPassword} type="password" placeholder="Repeat new password"/>
                    </div>
                    <div class="password__submit">
                      <input type="submit" value="Update Password"/>
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
  
          <div class="modal__wrap" style={this.state.showAddName ? {display:"block"} : {display:"none"}}>
              <div class="inner__modal">
                  <div class="password__modal">
                      <div class="head__password">
                          <h2>{"Update Name"}</h2>
                          <div class="close__modal">
                              <a onClick={this.changeShowAddName}><img src="/assets/close.svg" alt="close"/></a>
                          </div>
                      </div>
                      <div class="password__content">
                          <form onSubmit={this.submitAddName}>
                              <div class="group__password">
                                  <input value={this.state.name} onChange={this.onChangeAddName} placeholder="Name"/>
                              </div>
                              <div class="password__submit">
                                <input type="submit" value="Update Name"/>
                              </div>
                          </form>
                      </div>
                  </div>
              </div>
          </div>
  
          </div>
  
      
  
      );
    }
  }
  
  const connectStoreToProp = (state) => ({
    loading: state.main.loading
  })
  
  export default connect(connectStoreToProp)(SettingsPageContainer);