import { Col, Grid, Row, Tabs } from "antd";
import React from "react";
import JobsDetailOrganism from "../../organisms/jobs-detail/jobs-detail.organism";
import JobsListOrganism from "../../organisms/jobs-list-latest/jobs-list-latest.organism";
import JobsListSearchOrganism from "../../organisms/jobs-list-search/jobs-list-search.organism";
import QuickReportFloatButton from "../../atoms/quick-report-float-button/quick-report-float-button.atom";

export default function JobsPage() {
  const selectedBreakpoint = Object.entries(Grid.useBreakpoint())
    .filter((screen) => !!screen[1])
    .slice(-1)[0];

  const bpoints = {
    xs: { l: 12, r: 12 },
    sm: { l: 10, r: 14 },
    md: { l: 10, r: 14 },
    lg: { l: 8, r: 16 },
    xl: { l: 6, r: 18 },
    xxl: { l: 5, r: 19 }
  };

  const selectedSpans = selectedBreakpoint ? bpoints[selectedBreakpoint[0]] : { l: 18, r: 6 };

  return (
    <div style={{ height: "100%" }}>
      <Row gutter={[16, 16]} style={{ height: "100%" }}>
        <Col span={selectedSpans.l} style={{ height: "100%" }}>
          <Tabs
            style={{ height: "100%" }}
            defaultActiveKey="latest"
            items={[
              {
                key: "latest",
                label: "Latest",
                children: <JobsListOrganism />,
                style: { height: "100%" }
              },
              {
                key: "search",
                label: "Search",
                children: <JobsListSearchOrganism />,
                style: { height: "100%" }
              }
            ]}
          ></Tabs>
        </Col>
        <Col span={selectedSpans.r} style={{ height: "100%" }}>
          <JobsDetailOrganism />
        </Col>
      </Row>
      <QuickReportFloatButton />
    </div>
  );
}
