app.jsx

import React from "react";


//Импорт красивых сберовских кнопочек
import { IconHeart } from '@sberdevices/plasma-icons';
import { Button } from '@sberdevices/plasma-ui';

import {
  createSmartappDebugger,
  createAssistant,
} from "@sberdevices/assistant-client";

import styles from "./App.css";
import Video from "./Video"


const initializeAssistant = (getState/*: any*/) => {
  if (process.env.NODE_ENV === "development") {
    return createSmartappDebugger({
      token: process.env.REACT_APP_TOKEN ?? "",
      initPhrase: `Запусти ${process.env.REACT_APP_SMARTAPP}`,
      getState,
    });
  }
  return createAssistant({ getState });
};



export class App extends React.Component {

  constructor(props) {
    super(props);
    console.log('constructor');

    this.state = {
      notes: [],
      // testField: 0,
      // videoURLs: [
      //   { url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ&ab_channel=RickAstleyVEVO", id : 1 },
      //   { url: "https://www.youtube.com/watch?v=L_jWHffIx5E&ab_channel=SmashMouthVEVO", id : 2 }
      // ]
    }

    this.assistant = initializeAssistant(() => this.getStateForAssistant() );
    // this.assistant.on("data", (event/*: any*/) => {
    //   console.log(`assistant.on(data)`, event);
    //   const { action } = event
    //   this.dispatchAssistantAction(action);
    // });
    this.assistant.on("start", (event) => {
      console.log(`assistant.on(start)`, event);
    });

  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  getStateForAssistant () {
    console.log('getStateForAssistant: this.state:', this.state)
    const state = {
      item_selector: {
        items: this.state.notes.map(
          ({ id, title }, index) => ({
            number: index + 1,
            id,
            title,
          })
        ),
      },
    };
    console.log('getStateForAssistant: state:', state)
    return state;
  }

  // dispatchAssistantAction (action) {
  //   console.log('dispatchAssistantAction', action);
  //   if (action) {
  //     switch (action.type) {
  //       default:
  //         throw new Error();
  //     }
  //   }
  // }



  // handleClick = (e) => {
  //   this.setState ((state) => ({
  //       testField: state.testField + 1,
  //     }));
  // }


  render() {
    console.log('render');
    const testStyle = {
      margin: "20px",
      color: "pink",
    }
    return (
      <div className={styles.main}>
        <div className="videos">
          {/* <h1 style={testStyle}>Just random text</h1>
          <p style={testStyle}>Here we can see the value in testField (number of likes): { this.state.testField }</p>
          <Video videos={this.state.videoURLs} /> */}
        </div>
        {/* <div className="button">
          <Button
            contentLeft={<IconHeart color="green" size="s" />}
            text={"like"}
            view={"primary"}
            outlined={"true"}
            onClick={this.handleClick}>
          </Button>
        </div> */}
      </div>
    )
  }


}