import React, { useState, useEffect } from 'react';
import { Input, List } from 'antd';
import Add from './Add';
import Progress from './Progress'
import './index.less';

const list = [{
    id: 1,
    item: '數字1',
}, {
    id: 2,
    item: '數字2'
}, {
    id: 3,
    item: '數字3'
}, {
    id: 4,
    item: '數字4'
}];
 

const Home: React.FC = () => {
type checkedMap = {
[id: string]: boolean
}
type item = {
id: number;
item?: string;
}
const [checked, setChecked] = useState(false);
const [checkedMap, setCheckedMap] = useState({});
const handleCheckBox = (e: React.ChangeEvent, item: item) => {
const { checked } = e.target;
const newCheckedMap: any = Object.assign({}, checkedMap, {
[item.id]: checked,
})
let arr = Object.keys(newCheckedMap)
.map((key) => newCheckedMap[key])
.filter((item) => item === true);
if (list.length === arr.length) {
setChecked(true)
} else {
setChecked(false)
}

    setCheckedMap(newCheckedMap);
}
const checkedAll = () => {
    list.forEach((item: item) => checkedMap[item.id] = !checked);
    setChecked(!checked);
}
return (
    <div>

        <div className="mt20">
            <div className="header">
                <Add checked={checked} checkedAll={checkedAll} />
                <ul className="header-ul">
                    <li>數字1</li>
                    <li>數字2</li>
                    <li>數字3</li>
                    <li>數字4</li>
                    <li>數字5</li>
                </ul>
            </div>
            <div className="table">
                <List
                    header={<div>Table</div>}
                    bordered
                    dataSource={list}
                    renderItem={(item: item) => {
                        const checked = checkedMap[item.id] || false;
                        return (
                            <List.Item>
                                <div key={item.id}>
                                    <div className="content">
                                        <Input checked={checked} onChange={(e) => handleCheckBox(e, item)} type="checkbox" key={item.id} style={{ width: 15, height: 15, marginRight: 5 }} />
                                    </div>
                                </div>
                            </List.Item>
                        )
                    }}
                />
            </div>
        </div>
    </div>
)
 

}
export default Home;