import React, { useState } from "react";

import PaymentsOutlinedIcon from "@mui/icons-material/PaymentsOutlined";

import { ContribInlines } from "../../../../components/ContribInlines";
import { Header } from "../../../../components/Header";
import { Page } from "../../../../components/Page";
import { Tab } from "../../../../components/Tab";
import { TabPanel } from "../../../../components/TabPanel";
import { TabPanels } from "../../../../components/TabPanels";
import { Tabs } from "../../../../components/Tabs";
import { TitleBar } from "../../../../components/TitleBar";
import Content, { LeftColumn, RightColumn } from "../../../../containers/Content";
import { PageComponent } from "../../../../types";
import PriceListCard from "../../components/PriceListCard";
import { PriceListDetail } from "../../types/price_list";

const PriceListDetailPage: PageComponent<PriceListDetail> = ({ data }) => {
  const [priceList, setPriceList] = useState(data);

  return (
    <Page>
      <Header variant="opaque">
        <TitleBar title={data.name} />
        <Tabs>
          <Tab key="default" icon={<PaymentsOutlinedIcon />} label="Price List" value="default" />
        </Tabs>
      </Header>

      <TabPanels>
        <TabPanel key="default" value="default">
          <Content layout="fixedWidth">
            <LeftColumn>
              <ContribInlines data={data} />
            </LeftColumn>

            <RightColumn>
              <PriceListCard priceList={priceList} setPriceList={setPriceList} />
            </RightColumn>
          </Content>
        </TabPanel>
      </TabPanels>
    </Page>
  );
};

export default PriceListDetailPage;