import { setComma } from "../utile/setComma"

export const List = ({ chunkArray,selectedChunks,toggleChunkSelection }) => {
    return (
        <>
            {chunkArray.length > 0 && (
                <div style={{marginTop: "20px"}}>
                <h3>Chunks ({chunkArray.length})</h3>
                {chunkArray.map((chunk, idx) => (
                <div
                    key={idx}
                    style={{
                    padding: "10px",
                    margin: "5px 0",
                    border: "1px solid #ddd",
                    backgroundColor: chunk.status === 0 ? "#f0f0f0" : "white",
                    borderRadius: "4px",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "space-between"
                    }}
                >
                    <div style={{display: "flex", alignItems: "center"}}>
                    <input
                        type="checkbox"
                        checked={selectedChunks.includes(idx)}
                        onChange={() => toggleChunkSelection(idx)}
                        disabled={chunk.status === 0}
                        style={{
                        marginRight: "10px",
                        cursor: chunk.status === 0 ? "not-allowed" : "pointer"
                        }}
                    />
                    <span style={{color: chunk.status === 0 ? "#999" : "black"}}>
                        Chunk {idx + 1}: {chunk.chunkAddresses.length} addresses
                        - Total: {setComma(chunk.chunkTotal.toFixed(2))} tokens
                    </span>
                    </div>
                    {chunk.status === 0 ? (
                    <span style={{color: "green", fontWeight: "bold"}}>
                        ✓ 전송완료
                    </span>
                    ) : 
                    chunk.status === 1 ? 
                    (
                    <span style={{color: "red", fontWeight: "bold"}}>
                        X 전송실패
                    </span>
                    ) : ''
                }
                </div>
                ))}
            </div>
            )}
        </>
    )
}


