import { Button, Col, Dropdown, Form, Row, Space, Typography } from "antd";
import { PageHeader } from "@ant-design/pro-layout";
import { useTranslation } from "react-i18next";
import { connect } from "react-redux";
import ContractConvertToRo from "../../components/contract-convert-to-ro/contract-convert-to-ro.component";
import ContractCourtesyCarBlock from "../../components/contract-courtesy-car-block/contract-courtesy-car-block.component";
import ContractFormComponent from "../../components/contract-form/contract-form.component";
import ContractJobBlock from "../../components/contract-job-block/contract-job-block.component";
import { setModalContext } from "../../redux/modals/modals.actions";
import { GenerateDocument } from "../../utils/RenderTemplate";
import { TemplateList } from "../../utils/TemplateConstants";
import { useNotification } from "../../contexts/Notifications/notificationContext.jsx";

const mapDispatchToProps = (dispatch) => ({
  setCourtesyCarReturnModalContext: (context) =>
    dispatch(setModalContext({ context: context, modal: "courtesyCarReturn" }))
});

export function ContractDetailPage({
  contract,
  job,
  courtesyCar,
  setCourtesyCarReturnModalContext,
  refetch,
  form,
  saveLoading
}) {
  const { t } = useTranslation();
  const notification = useNotification();

  return (
    <div>
      <Row align="middle">
        <Typography.Title></Typography.Title>
      </Row>
      <PageHeader
        title={t("contracts.labels.agreement", {
          agreement_num: contract?.agreementnumber,
          status: t(contract?.status)
        })}
        extra={
          <Form.Item shouldUpdate>
            {() => {
              const menu = {
                onClick: (e) => {
                  GenerateDocument(
                    {
                      name: TemplateList("courtesycarcontract")[e.key].key,
                      variables: { id: contract.id }
                    },
                    {},
                    "p",
                    null,
                    notification
                  );
                },
                items: [
                  {
                    key: "courtesy_car_contract",
                    label: t("contracts.actions.printcontract")
                  },
                  {
                    key: "courtesy_car_terms",
                    label: t("printcenter.courtesycarcontract.courtesy_car_terms")
                  },
                  {
                    key: "courtesy_car_impound",
                    label: t("printcenter.courtesycarcontract.courtesy_car_impound")
                  }
                ]
              };

              return (
                <Space>
                  <Button type="primary" htmlType="submit" loading={saveLoading}>
                    {t("general.actions.save")}
                  </Button>
                  <Button
                    disabled={!contract || (contract && contract.status !== "contracts.status.out")}
                    onClick={() => {
                      setCourtesyCarReturnModalContext({
                        actions: { refetch },
                        context: {
                          contractId: contract.id,
                          courtesyCarId: courtesyCar.id
                        }
                      });
                    }}
                  >
                    {t("courtesycars.actions.return")}
                  </Button>
                  <Dropdown trigger="click" menu={menu}>
                    <Button>{t("general.labels.print")}</Button>
                  </Dropdown>

                  <ContractConvertToRo contract={contract} disabled={form.isFieldsTouched()} />
                </Space>
              );
            }}
          </Form.Item>
        }
      />
      <Row gutter={[16, 16]}>
        <Col sm={24} md={12}>
          <ContractJobBlock job={job} />
        </Col>
        <Col sm={24} md={12}>
          <ContractCourtesyCarBlock courtesyCar={courtesyCar} />
        </Col>
        <Col span={24}>
          <ContractFormComponent form={form} />
        </Col>
      </Row>
    </div>
  );
}

export default connect(null, mapDispatchToProps)(ContractDetailPage);
