import { Button, Card, Divider, Form, Space, Typography } from "antd";
import { connect } from "react-redux";
import queryString from "query-string";
import { useLocation } from "react-router-dom";
import { createStructuredSelector } from "reselect";
import { setModalContext } from "../../redux/modals/modals.actions";
import { PayrollLaborAllocationsTable } from "../labor-allocations-table/labor-allocations-table.payroll.component.jsx";
import { TimeTicketTaskModalComponent } from "../time-ticket-task-modal/time-ticket-task-modal.component.jsx";

const mapStateToProps = createStructuredSelector({});

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

const commissionCutFixture = {
  bodyshop: {
    features: {
      timetickets: true
    },
    employees: [
      { id: "emp-1", first_name: "Avery", last_name: "Johnson" },
      { id: "emp-2", first_name: "Morgan", last_name: "Lee" }
    ],
    md_tasks_presets: {
      presets: [
        {
          name: "Body Prep",
          percent: 50,
          hourstype: ["LAA", "LAB"],
          nextstatus: "In Progress"
        }
      ]
    }
  },
  jobId: "fixture-job-1",
  joblines: [
    {
      id: "line-1",
      mod_lbr_ty: "LAA",
      mod_lb_hrs: 4,
      assigned_team: "team-1",
      convertedtolbr: false
    }
  ],
  previewValues: {
    task: "Body Prep",
    timetickets: [
      {
        employeeid: "emp-1",
        cost_center: "Body",
        ciecacode: "LAA",
        productivehrs: 2,
        rate: 40,
        payoutamount: 80,
        payout_context: {
          payout_method: "commission"
        }
      },
      {
        employeeid: "emp-2",
        cost_center: "Refinish",
        ciecacode: "LAB",
        productivehrs: 1,
        rate: 28,
        payoutamount: 28,
        payout_context: {
          payout_method: "hourly"
        }
      }
    ]
  }
};

function CommissionCutHarness() {
  const [form] = Form.useForm();

  return (
    <Space direction="vertical" size="large" style={{ width: "100%" }}>
      <Typography.Title level={2}>Commission Cut Test Harness</Typography.Title>
      <Typography.Paragraph>
        This fixture keeps commission-cut browser checks stable by rendering representative payroll and preview UI with
        local data.
      </Typography.Paragraph>
      <Card title="Payroll Labor Allocations">
        <PayrollLaborAllocationsTable
          jobId={commissionCutFixture.jobId}
          joblines={commissionCutFixture.joblines}
          timetickets={[]}
          bodyshop={commissionCutFixture.bodyshop}
          adjustments={[]}
          refetch={() => {}}
        />
      </Card>
      <Divider />
      <Card title="Claim Task Preview">
        <Form form={form} initialValues={commissionCutFixture.previewValues} layout="vertical">
          <TimeTicketTaskModalComponent
            bodyshop={commissionCutFixture.bodyshop}
            form={form}
            loading={false}
            completedTasks={[]}
            unassignedHours={1.25}
          />
        </Form>
      </Card>
    </Space>
  );
}

function Test({ setRefundPaymentContext, refundPaymentModal }) {
  const search = queryString.parse(useLocation().search);
  console.log("refundPaymentModal", refundPaymentModal);

  if (search.fixture === "commission-cut") {
    return <CommissionCutHarness />;
  }

  return (
    <div>
      <Button
        onClick={() =>
          setRefundPaymentContext({
            context: {}
          })
        }
      >
        Open Modal
      </Button>
    </div>
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(Test);