session-desktop/ts/components/session/settings/SessionSettingListItem.tsx

import React from 'react';
import { SessionToggle } from '../SessionToggle';
import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';



export enum SessionSettingType {
  Toggle = 'toggle',
  Options = 'options',
  Button = 'button',
}

interface Props {
  title: string;
  description?: string;
  type: SessionSettingType;
  value: boolean | string;
  onClick?: any;
  buttonText?: string;
  buttonColor?: SessionButtonColor;
}

export class SessionSettingListItem extends React.Component<Props> {
  public constructor(props: Props) {
    super(props);
    this.state = {
    };
  }



  public render(): JSX.Element {
    const { title, description, type, value, onClick, buttonText, buttonColor } = this.props

    return (
      <div className="session-settings-item">
        <div className="session-settings-item__info">
          <div className="session-settings-item__title">
            { title }
          </div>

          { description && (
            <div className="session-settings-item__description">
              { description }
            </div>
          )}
        </div>

        { type === SessionSettingType.Toggle && (
          <div className="session-sessings-item__selection">
            <SessionToggle
              active={ Boolean(value) }
              onClick = { onClick }
            />
          </div>
        )}

        { type === SessionSettingType.Button && (
          <SessionButton
            text = { buttonText }
            buttonColor = { buttonColor }
            onClick = { onClick }
          />
        )}
        
      </div>
    );
  }

}