import '@material/web/list/list-item'
import '@material/web/ripple/ripple'
import '@material/web/switch/switch.js'

import './PollListItem.css'
import React from "react";

export default function PollListItem(
        poll,
        setEditPoll,
        updatePoll,
) {
    return (
        <md-list-item onClick={() => setEditPoll(poll)}>
            <md-ripple></md-ripple>
            <div className="poll-list-item">
                <div>
                    <div className="name md-typescale-title-large">{poll.name}</div>
                    <div className="caption md-typescale-body-medium">
                        <span>{poll.daysOfWeek}</span>
                        &nbsp;&bull;&nbsp;
                        <span>{poll.time}</span>
                        &nbsp;&bull;&nbsp;
                        <span>{poll.questionNumber}</span>
                    </div>
                </div>
                <md-switch onClickCapture={(event) => {
                    event.nativeEvent.stopPropagation()
                    poll.isEnabled = !poll.isEnabled
                    updatePoll(poll)
                }} {...(poll.isEnabled ? {selected: true} : {})}></md-switch>
            </div>
        </md-list-item>
    )
}