import React, { Component } from 'react';
import Avatar from '@material-ui/core/Avatar';

import './index.scss';
import { toast } from 'react-toastify';

export default class Message2D extends Component {
  state = { value: this.props.message.value };
  click(id) {
    if (this.props.isActive) {
      this.setState({ value: id });
      toast.success('ثبت شد');
      this.props.action();
    }
  }
  render() {
    const { message, user, isSelf, isActive, action } = this.props;
    return (
      <div className="message-2d d-flex flex-column d-flex">
        <div className="message-2d__options d-flex flex-column">
          {message.options.map((option, i) => (
            <div
              key={message.id + '_' + option.id + '_' + i}
              className="message-2d__options--row d-flex"
            >
              {option.map((item, i) => (
                <div
                  key={message.id + '_' + item.id + '_' + i}
                  className="d-flex"
                  style={{
                    width: `calc(100% / ${option.length} )`,

                    backgroundColor: item.id == this.state.value ? '#6f42c1' : '',
                  }}
                  onClick={() => this.click(item.id)}
                >
                  <span>{item.name}</span>
                </div>
              ))}
            </div>
          ))}
        </div>
      </div>
    );
  }
}