import React, { useState } from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { withRouter } from 'react-router';
import Screen from '../../components/mobile/MobileScreen';
import Header from '../../components/mobile/Header';
import IconButton from '../../components/mobile/IconButton';
import { ExitIcon } from '../../common/icons';
import Footer from '../../components/mobile/Footer';
import { prop, remSize } from '../../theme';
import SketchList from '../IDE/components/SketchList';
import CollectionList from '../IDE/components/CollectionList';
import AssetList from '../IDE/components/AssetList';
import Content from './MobileViewContent';
import { SketchSearchbar } from '../IDE/components/Searchbar';
const EXAMPLE_USERNAME = 'p5';
const FooterTab = styled.div`
background: ${props => prop(props.selected ? 'backgroundColor' : 'MobilePanel.default.foreground')};
color: ${props => prop(`MobilePanel.default.${props.selected ? 'foreground' : 'background'}`)};
padding: ${remSize(16)};
width: 100%;
display: flex;
`;
const Subheader = styled.div`
.searchbar {
display: flex;
* {
border-radius: 0px;
}
}
.searchbar__input { width: 100%; }
`;
const FooterTabSwitcher = styled.div`
display: flex;
h3 { text-align: center; width: 100%; }
`;
const Panels = {
Sketches: SketchList,
Collections: CollectionList,
Assets: AssetList
};
const renderPanel = (name, props) => (Component => (Component && ))(Panels[name]);
const MobileDashboard = ({ params }) => {
const Tabs = Object.keys(Panels);
const [selected, selectTab] = useState(Tabs[0]);
// const username = 'p5';
const { username } = params;
const isExamples = username === EXAMPLE_USERNAME;
return (
{renderPanel(selected, { username })}
);
};
MobileDashboard.propTypes = {
params: PropTypes.shape({
username: PropTypes.string.isRequired
})
};
MobileDashboard.defaultProps = { params: {} };
export default withRouter(MobileDashboard);