import React, { Component } from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import FontAwesome from "react-fontawesome";

const ROW_SIZE_UNIT = 26;

function LazyType(f) {
    return function __lazyType() {
        return f().apply(this, arguments);
    };
}

const LazyDirectoryShape = LazyType(() => DirectoryShape);
const FileShape = PropTypes.shape({
    path: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired
});
const DirectoryShape = PropTypes.shape({
    path: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    directories: PropTypes.arrayOf(LazyDirectoryShape).isRequired,
    files: PropTypes.arrayOf(FileShape).isRequired
});

const Container = styled.div`
    width: 100%;
    display: flex;
    flex-direction: column;
    align-content: stretch;
`;
const ItemRow = styled.div`
    margin-left: ${props => props.depth ? (props.depth * ROW_SIZE_UNIT) : 0}px;
    height: ${ROW_SIZE_UNIT}px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
`;
const ExpandBox = styled.div`
    width: ${ROW_SIZE_UNIT}px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 183, 172, 1);
    color: #fff;
    margin-right: 4px;
    cursor: pointer;
`;
const ItemIcon = styled.div`
    width: ${ROW_SIZE_UNIT}px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: ${props => props.isFile ? "#b2b2b2" : "#f2ac09"};
    font-size: 18px;
    margin-right: 4px;
`;
const ItemText = styled.div`
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: rgb(72, 72, 72);
`;

class RemoteFileTree extends Component {
    static propTypes = {
        root: DirectoryShape.isRequired
    };

    // removeThis:
    static defaultProps = {
        root: {
            path: "/",
            name: "/",
            directories: [
                {
                    path: "/Documents",
                    name: "Documents",
                    directories: [],
                    files: []
                },
                {
                    path: "/Photos",
                    name: "Photos",
                    directories: [],
                    files: []
                },
                {
                    path: "/Public",
                    name: "Public",
                    directories: [],
                    files: []
                }
            ],
            files: []
        }
    };

    constructor(props) {
        super(props);
        this.state = {
            loadedDirectories: ["/"],
            openDirectories: ["/"]
        };
    }

    render() {
        return (
            <Container>
                {this.renderDirectory(this.props.root)}
            </Container>
        );
    }

    renderDirectory(dir, depth = 0) {
        console.log(this.state.openDirectories, dir.path);
        const isOpen = this.state.openDirectories.includes(dir.path);
        const thisItem = (
            <ItemRow depth={depth} key={dir.path}>
                <ExpandBox>
                    <Choose>
                        <When condition={isOpen}>
                            <FontAwesome name="minus" />
                        </When>
                        <Otherwise>
                            <FontAwesome name="plus" />
                        </Otherwise>
                    </Choose>
                </ExpandBox>
                <ItemIcon isFile={false}>
                    <FontAwesome name="folder" />
                </ItemIcon>
                <ItemText>{dir.name}</ItemText>
            </ItemRow>
        );
        const allItems = [null];
        if (isOpen) {
            allItems.push(...dir.directories);
        }
        return (
            <For each="directory" of={allItems}>
                <Choose>
                    <When condition={directory === null}>
                        {thisItem}
                    </When>
                    <Otherwise>
                        {this.renderDirectory(directory, depth + 1)}
                    </Otherwise>
                </Choose>
            </For>
        );
    }
}

export default RemoteFileTree;

@@ -1240,16 +1240,52 @@
 -color: 
+$%7Bprops =%3E props.isFile ? %22#ddd%22 : %22
 rgba(0, 
@@ -1296,16 +1296,18 @@
  172, 1)
+%22%7D
 ;%0A    co
@@ -1356,15 +1356,56 @@
 or: 
+$%7Bprops =%3E props.isFile ? %22default%22 : %22
 pointer
+%22%7D
 ;%0A%60;
@@ -2641,32 +2641,282 @@
         files: %5B
+%0A                %7B%0A                    path: %22/some-file.txt%22,%0A                    name: %22some-file.txt%22%0A                %7D,%0A                %7B%0A                    path: %22/photo.jpg%22,%0A                    name: %22photo.jpg%22%0A                %7D%0A            
 %5D%0A        %7D%0A    
@@ -3192,16 +3192,71 @@
 .root)%7D%0A
+                %7Bthis.renderFiles(this.props.root, 1)%7D%0A
         
@@ -3332,67 +3332,8 @@
 ) %7B%0A
-        console.log(this.state.openDirectories, dir.path);%0A
     
@@ -4581,16 +4581,462 @@
 );%0A    %7D
+%0A%0A    renderFiles(dir, depth = 0) %7B%0A        return (%0A            %3CFor each=%22file%22 of=%7Bdir.files%7D%3E%0A                %3CItemRow depth=%7Bdepth%7D key=%7Bfile.path%7D%3E%0A                    %3CExpandBox isFile=%7Btrue%7D /%3E%0A                    %3CItemIcon isFile=%7Btrue%7D%3E%0A                        %3CFontAwesome name=%22file%22 /%3E%0A                    %3C/ItemIcon%3E%0A                    %3CItemText%3E%7Bfile.name%7D%3C/ItemText%3E%0A                %3C/ItemRow%3E%0A            %3C/For%3E%0A        );%0A    %7D
 %0A%7D%0A%0Aexpo

Add file display