import styled from "@emotion/styled";
import { AttractionWidgetContainer } from "../attractions-widget/AttractionWidgetContainer";
import { WeatherWidgetContainer } from "../WeatherWidget/WeatherWidgetContainer";
import { OperativeInfoWidget } from "../operative-info-widget/operative-info-widget";
import { NavWidgetContainer } from "../nav-widget/nav-widget-container";
import { MapWidgetContainer } from "../MapWidgetContainer";
import { RouteInfoWidgetContainer } from "../RouteInfoWidgetContainer/RouteInfoWidgetContainer";

const StyledDashboard = styled.div`
  background-color: #000;

  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  display: flex;

  .nav-widget--opened + .container {
    margin-left: 290px;
  }

  .container {
    position: relative;
    width: 100%;
    height: 100%;

    margin-left: 0;

    transition: margin-left ease-in-out 0.3s;

    .left-top-wrapper {
      position: absolute;
      .route-number {
        margin: 32px;
      }

      .weather-widget {
        margin: 32px;
      }
    }
  }

  .right-sidebar {
    flex-shrink: 0;
  }
`;

export function Dashboard() {
  return (
    <StyledDashboard>
      <NavWidgetContainer />

      <div className="container">
        <div className="left-top-wrapper">
          <RouteInfoWidgetContainer className="route-number" />
          <WeatherWidgetContainer className="weather-widget" />
        </div>

        <MapWidgetContainer />

        <OperativeInfoWidget />
      </div>

      <div className="right-sidebar">
        <AttractionWidgetContainer />
      </div>
    </StyledDashboard>
  );
}