import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// import App from "./App";
import * as serviceWorker from './serviceWorker'
import TodoList from './TodoList'

// function Welcome(props) {
//     return <h1>hello,{props.name}</h1>;
// }

// class Welcome extends React.Component {
//     render() {
//         return <h1>hello,{this.props.name}</h1>;
//     }
// }

// const element = <Welcome name="Sara" />;

// function App(){
//     return(
//         <div>
//             <Welcome name="Sara"></Welcome>
//             <Welcome name="Sara"></Welcome>
//             <Welcome name="Sara"></Welcome>
//         </div>
//     )
// }

// function formatDate(date) {
//     return date.toLocaleDateString();
// }

// const comment = {
//     date: new Date(),
//     text: "I hope you enjoy learning React!",
//     author: {
//         name: "Hello Kitty",
//         avatarUrl: "https://placekitten.com/g/64/64"
//     }
// };
// function Avatar(props) {
//     return (
//         <img
//             className="Avatar"
//             src={props.user.avatarUrl}
//             alt={props.user.name}
//         />
//     );
// }

// function UserInfo(props) {
//     return (
//         <div className="UserInfo">
//             <Avatar user={props.user} />
//             <div className="UserInfo-name">{props.user.name}</div>
//         </div>
//     );
// }

// function Comment(props) {
//     return (
//         <div className="Comment">
//             <UserInfo user={props.author} />
//             <div className="Comment-text">{props.text}</div>
//             <div className="Comment-date">
//                 {formatDate(props.date)}
//             </div>
//         </div>
//     );
// }
// ReactDOM.render(
//     <Comment date={comment.date} text={comment.text} author={comment.author} />,
//     document.getElementById("root")
// );

// function Clock(props) {
//     return (
//         <div>
//             <h1>Hello,world!</h1>
//             <h2>It is {props.date.toLocaleTimeString()}</h2>
//         </div>
//     );
// }

// function tick() {
//     ReactDOM.render(
//         <Clock date={new Date()}></Clock>,
//         document.getElementById("root")
//     );
// }

// setInterval(tick, 1000);

// function FormattedDate(props) {
//     return <h2>It is {props.date.toLocaleTimeString()}</h2>
// }

// class Clock extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = { date: new Date() };
//     }

//     componentDidMount() {
//         this.timerID = setInterval(() => {
//             this.tick();
//         }, 1000);
//     }

//     componentWillUnmount() {
//         clearInterval(this.timerID);
//     }

//     tick() {
//         this.setState({
//             date: new Date()
//         });
//     }

//     render() {
//         return (
//             <div>
//                 <h1>Hello world!</h1>
//                 <FormattedDate date={this.state.date} />
//             </div>
//         );
//     }
// }

// function App() {
//     return (
//         <div>
//             <Clock />
//             <Clock />
//             <Clock />
//         </div>
//     )
// }
// ReactDOM.render(<App />, document.getElementById("root"));

// class Toggle extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = { isToggleOn: true };
//         this.handleClick = this.handleClick.bind(this);
//     }
//     handleClick() {
//         console.log(this)
//         this.setState(prevState => ({
//             isToggleOn: !prevState.isToggleOn
//         }));
//     }
//     render() {
//         return (
//             <button onClick={this.handleClick}>
//                 {this.state.isToggleOn ? "ON" : "OFF"}
//             </button>
//         );
//     }
// }
// ReactDOM.render(<Toggle />, document.getElementById("root"));

// function UserGreeting(props) {
//     return <h1>Welcome back!</h1>;
// }

// function GuestGreeting(props) {
//     return <h1>Please sign up.</h1>;
// }

// function Greeting(props) {
//     const isLoggedIn = props.isLoggedIn;
//     if (isLoggedIn) {
//         return <UserGreeting />;
//     }
//     return <GuestGreeting />;
// }

// ReactDOM.render(
//     <Greeting isLoggedIn={false} />,
//     document.getElementById("root")
// );

// class LoginControl extends React.Component {
//     constructor(props) {
//         super(props);
//         this.handleLoginClick = this.handleLoginClick.bind(this);
//         this.handleLogoutClick = this.handleLogoutClick.bind(this);
//         this.state = { isLoggedIn: false };
//     }
//     handleLoginClick() {
//         this.setState({ isLoggedIn: true });
//     }
//     handleLogoutClick() {
//         this.setState({ isLoggedIn: false });
//     }
//     render() {
//         const isLoggedIn = this.state.isLoggedIn;
//         let button;

//         if (isLoggedIn) {
//             button = <LogoutButton onClick={this.handleLogoutClick} />;
//         } else {
//             button = <LoginButton onClick={this.handleLoginClick} />;
//         }

//         return (
//             <div>
//                 <Greeting isLoggedIn={isLoggedIn} />
//                 {button}
//             </div>
//         );
//     }
// }
// function UserGreeting(props) {
//     return <h1>Welcome back!</h1>;
// }

// function GuestGreeting(props) {
//     return <h1>Please sign up.</h1>;
// }

// function Greeting(props) {
//     const isLoggedIn = props.isLoggedIn;
//     if (isLoggedIn) {
//         return <UserGreeting />;
//     }
//     return <GuestGreeting />;
// }

// function LoginButton(props) {
//     return <button onClick={props.onClick}>Login</button>;
// }

// function LogoutButton(props) {
//     return <button onClick={props.onClick}>Logout</button>;
// }
// ReactDOM.render(<LoginControl />, document.getElementById("root"));

// function Mailbox(props) {
//     const unreadMessages = props.unreadMessages;
//     return (
//         <div>
//             <h1>Hollo!</h1>
//             {unreadMessages.length > 0 && (
//                 <h2>you have {unreadMessages.length}unread messages</h2>
//             )}
//         </div>
//     );
// }

// const messages = ["react", "Re:React", "Re:Re:React"];
// ReactDOM.render(
//     <Mailbox unreadMessages={messages} />,
//     document.getElementById("root")
// );

// function WarningBanner(props) {
//     if (!props.warn) {
//         return null;
//     }

//     return <div className="warning">Warning!</div>;
// }

// class Page extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = { showWarning: true };
//         this.handleToggleClick = this.handleToggleClick.bind(this);
//     }

//     handleToggleClick() {
//         this.setState(prevState => ({
//             showWarning: !prevState.showWarning
//         }));
//     }

//     render() {
//         return (
//             <div>
//                 <WarningBanner warn={this.state.showWarning} />
//                 <button onClick={this.handleToggleClick}>
//                     {this.state.showWarning ? "Hide" : "Show"}
//                 </button>
//             </div>
//         );
//     }
// }
// ReactDOM.render(<Page />, document.getElementById("root"));

// const numbers = [1, 2, 3, 4, 5];
// const listItems = numbers.map(number => <li>{number}</li>);
// ReactDOM.render(<ul>{listItems}</ul>, document.getElementById("root"));

// function NumberList(props) {
//     const numbers = props.numbers;
//     const listItems = numbers.map((todo, index) => <li key={index}>{todo}</li>);
//     return <ul>{listItems}</ul>;
// }

// const numbers = [6, 7, 8, 9, 10];
// ReactDOM.render(
//     <NumberList numbers={numbers} />,
//     document.getElementById("root")
// );

// function ListItem(props) {
//     return <li>{props.value}</li>;
// }

// function NumberList(props) {
//     const numbers = props.numbers;
//     const listItems = numbers.map(number => (
//         <ListItem key={number.toString()} value={number} />
//     ));
//     return <ul>{listItems}</ul>;
// }

// const numbers = [1, 2, 3, 4, 5];
// ReactDOM.render(
//     <NumberList numbers={numbers} />,
//     document.getElementById("root")
// );

// function Blog(props) {
//     const sidebar = (
//         <ul>
//             {props.posts.map(post => (
//                 <li key={post.id}>{post.title}</li>
//             ))}
//         </ul>
//     );
//     const content = props.posts.map(post => (
//         <div key={post.id}>
//             <h3>{post.title}</h3>
//             <p>{post.content}</p>
//         </div>
//     ));
//     return (
//         <div>
//             {sidebar}
//             <hr />
//             {content}
//         </div>
//     );
// }

// const posts = [
//     { id: 1, title: "Hello Wrold", content: "Welcome to learning React!" },
//     { id: 2, title: "Installation", content: "You can install React from npm." }
// ];
// ReactDOM.render(<Blog posts={posts} />, document.getElementById("root"));

// function ListItem(props) {
//     return <li>{props.value}</li>;
// }

// function NumberList(props) {
//     const numbers = props.numbers;
//     return (
//         <ul>
//             {numbers.map(number => (
//                 <ListItem key={number.toString()} value={number} />
//             ))}
//         </ul>
//     );
// }

// const numbers = [1, 2, 3, 4, 5];
// ReactDOM.render(
//     <NumberList numbers={numbers} />,
//     document.getElementById("root")
// );

// class NameForm extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = { value: "" };
//         this.handleChange = this.handleChange.bind(this);
//         this.handleSubmit = this.handleSubmit.bind(this);
//     }
//     handleChange(event) {
//         this.setState({ value: event.target.value });
//     }

//     handleSubmit(event) {
//         this.state.value
//             ? alert("A name was submitted: " + this.state.value)
//             : alert("name null");
//         event.preventDefault();
//     }

//     render() {
//         return (
//             <form onSubmit={this.handleSubmit}>
//                 <label>
//                     Name:
//                     <input
//                         type="text"
//                         value={this.state.value}
//                         onChange={this.handleChange}
//                     />
//                 </label>
//                 <input type="submit" value="Submit" />
//             </form>
//         );
//     }
// }
// ReactDOM.render(<NameForm />, document.getElementById("root"));

// class FlavorForm extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = { value: "coconut" };

//         this.handleChange = this.handleChange.bind(this);
//         this.handleSubmit = this.handleSubmit.bind(this);
//     }

//     handleChange(event) {
//         this.setState({ value: event.target.value });
//     }

//     handleSubmit(event) {
//         alert("Your favorite flavor is: " + this.state.value);
//         event.preventDefault();
//     }

//     render() {
//         return (
//             <form onSubmit={this.handleSubmit}>
//                 <label>
//                     Pick your favorite flavor:
//                     <select
//                         value={this.state.value}
//                         onChange={this.handleChange}
//                     >
//                         <option value="grapefruit">Grapefruit</option>
//                         <option value="lime">Lime</option>
//                         <option value="coconut">Coconut</option>
//                         <option value="mango">Mango</option>
//                     </select>
//                 </label>
//                 <input type="submit" value="Submit" />
//             </form>
//         );
//     }
// }
// ReactDOM.render(<FlavorForm />, document.getElementById("root"));

// class Reservation extends React.Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             isGoing: true,
//             numberOfGuests: 2
//         };

//         this.handleInputChange = this.handleInputChange.bind(this);
//     }

//     handleInputChange(event) {
//         const target = event.target;
//         const value =
//             target.type === "checkbox" ? target.checked : target.value;
//         const name = target.name;

//         this.setState({
//             [name]: value
//         });
//     }

//     render() {
//         return (
//             <form>
//                 <label>
//                     Is going:
//                     <input
//                         name="isGoing"
//                         type="checkbox"
//                         checked={this.state.isGoing}
//                         onChange={this.handleInputChange}
//                     />
//                 </label>
//

//                 <label>
//                     Number of guests:
//                     <input
//                         name="numberOfGuests"
//                         type="number"
//                         value={this.state.numberOfGuests}
//                         onChange={this.handleInputChange}
//                     />
//                 </label>
//             </form>
//         );
//     }
// }
// ReactDOM.render(<Reservation />, document.getElementById("root"));

// function BoilingVerdict(props) {
//     if (props.celsius >= 100) {
//         return <p>The water would boil.</p>;
//     }
//     return <p>The water would not boil.</p>;
// }

// class Calculator extends React.Component {
//     constructor(props) {
//         super(props);
//         this.handleChange = this.handleChange.bind(this);
//         this.state = { temperature: "" };
//     }

//     handleChange(e) {
//         this.setState({ temperature: e.target.value });
//     }

//     render() {
//         const temperature = this.state.temperature;
//         return (
//             <fieldset>
//                 <legend>Enter temperature in Celsius:</legend>
//                 <input value={temperature} onChange={this.handleChange} />
//                 <BoilingVerdict celsius={parseFloat(temperature)} />
//             </fieldset>
//         );
//     }
// }
// ReactDOM.render(<Calculator />, document.getElementById("root"));

// const scaleNames = {
//     c: "Celsius",
//     f: "Fahrenheit"
// };

// function toCelsius(fahrenheit) {
//     return ((fahrenheit - 32) * 5) / 9;
// }

// function toFahrenheit(celsius) {
//     return (celsius * 9) / 5 + 32;
// }

// function tryConvert(temperature, convert) {
//     const input = parseFloat(temperature);
//     if (Number.isNaN(input)) return "";
//     const output = convert(input);
//     const rounded = Math.round(output * 1000) / 1000;
//     return rounded.toString();
// }

// function BoilingVerdict(props) {
//     if (props.celsius >= 100) {
//         return <p>The water would boil.</p>;
//     }
//     return <p>The water would not boil.</p>;
// }

// class TemperatureInput extends React.Component {
//     constructor(props) {
//         super(props);
//         this.handleChange = this.handleChange.bind(this);
//     }
//     handleChange(e) {
//         this.props.onTemperatureChange(e.target.value);
//     }

//     render() {
//         const temperature = this.props.temperature;
//         const scale = this.props.scale;
//         return (
//             <fieldset>
//                 <legend>Enter temperature in {scaleNames[scale]}:</legend>
//                 <input value={temperature} onChange={this.handleChange} />
//             </fieldset>
//         );
//     }
// }

// class Calculator extends React.Component {
//     constructor(props) {
//         super(props);
//         this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
//         this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
//         this.state = { temperature: "", scale: "c" };
//     }
//     handleCelsiusChange(temperature) {
//         this.setState({ scale: "c", temperature });
//     }

//     handleFahrenheitChange(temperature) {
//         this.setState({ scale: "f", temperature });
//     }
//     render() {
//         const scale = this.state.scale;
//         const temperature = this.state.temperature;
//         const celsius =
//             scale === "f" ? tryConvert(temperature, toCelsius) : temperature;
//         const fahrenheit =
//             scale === "c" ? tryConvert(temperature, toFahrenheit) : temperature;

//         return (
//             <div>
//                 <TemperatureInput
//                     scale="c"
//                     temperature={celsius}
//                     onTemperatureChange={this.handleCelsiusChange}
//                 />
//                 <TemperatureInput
//                     scale="f"
//                     temperature={fahrenheit}
//                     onTemperatureChange={this.handleFahrenheitChange}
//                 />
//                 <BoilingVerdict celsius={parseFloat(celsius)} />
//                 <Button type="primary" icon="search">
//                     Search
//                 </Button>
//             </div>
//         );
//     }
// }
// ReactDOM.render(<Calculator />, document.getElementById("root"));

ReactDOM.render(<TodoList />, document.getElementById('root'))

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister()