import {AlertFilled} from "@ant-design/icons";
import {
    Button,
    Divider,
    Dropdown,
    Form,
    Input,
    notification,
    Popover,
    Select,
    Space,
} from "antd";
import parsePhoneNumber from "libphonenumber-js";
import dayjs from "../../utils/day";
import queryString from "query-string";
import React, {useState} from "react";
import {useTranslation} from "react-i18next";
import {connect} from "react-redux";
import {Link, useNavigate, useLocation} from "react-router-dom";
import {createStructuredSelector} from "reselect";
import {
    openChatByPhone,
    setMessage,
} from "../../redux/messaging/messaging.actions";
import {setModalContext} from "../../redux/modals/modals.actions";
import {selectBodyshop} from "../../redux/user/user.selectors";
import CurrencyFormatter from "../../utils/CurrencyFormatter";
import {GenerateDocument} from "../../utils/RenderTemplate";
import {TemplateList} from "../../utils/TemplateConstants";
import ChatOpenButton from "../chat-open-button/chat-open-button.component";
import DataLabel from "../data-label/data-label.component";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
import ScheduleManualEvent from "../schedule-manual-event/schedule-manual-event.component";
import ScheduleAtChange from "./job-at-change.component";
import ScheduleEventColor from "./schedule-event.color.component";
import ScheduleEventNote from "./schedule-event.note.component";
import {useMutation} from "@apollo/client";
import {UPDATE_APPOINTMENT} from "../../graphql/appointments.queries";

const mapStateToProps = createStructuredSelector({
    bodyshop: selectBodyshop,
});
const mapDispatchToProps = (dispatch) => ({
    setScheduleContext: (context) =>
        dispatch(setModalContext({context: context, modal: "schedule"})),
    openChatByPhone: (phone) => dispatch(openChatByPhone(phone)),
    setMessage: (text) => dispatch(setMessage(text)),
});

export function ScheduleEventComponent({
                                           bodyshop,
                                           setMessage,
                                           openChatByPhone,
                                           event,
                                           refetch,
                                           handleCancel,
                                           setScheduleContext,
                                       }) {
    const {t} = useTranslation();
    const [open, setOpen] = useState(false);
    const history = useNavigate();
    const searchParams = queryString.parse(useLocation().search);
    const [updateAppointment] = useMutation(UPDATE_APPOINTMENT);
    const [title, setTitle] = useState(event.title);
    const blockContent = (
        <Space direction="vertical" wrap>
            <Input
                value={title}
                onChange={(e) => setTitle(e.currentTarget.value)}
                onBlur={async () => {
                    await updateAppointment({
                        variables: {
                            appid: event.id,
                            app: {
                                title: title,
                            },
                        },
                        optimisticResponse: {
                            update_appointments: {
                                __typename: "appointments_mutation_response",
                                returning: [
                                    {
                                        ...event,
                                        title: title,
                                        __typename: "appointments",
                                    },
                                ],
                            },
                        },
                    });
                }}
            />

            <Button
                onClick={() => handleCancel({id: event.id})}
                disabled={event.arrived}
            >
                {t("appointments.actions.unblock")}
            </Button>
        </Space>
    );

    const popoverContent = (
        <div style={{maxWidth: "40vw"}}>
            {!event.isintake ? (
                <Space>
                    <strong>{event.title}</strong>
                    <ScheduleEventColor event={event}/>
                </Space>
            ) : (
                <Space>
                    <strong>
                        <OwnerNameDisplay ownerObject={event.job}/>
                    </strong>
                    <span style={{margin: 4}}>
            {`${(event.job && event.job.v_model_yr) || ""} ${
                (event.job && event.job.v_make_desc) || ""
            } ${(event.job && event.job.v_model_desc) || ""}`}
          </span>
                    <ScheduleEventColor event={event}/>
                </Space>
            )}

            {event.job ? (
                <div>
                    <DataLabel label={t("jobs.fields.ro_number")}>
                        {(event.job && event.job.ro_number) || ""}
                    </DataLabel>
                    <DataLabel label={t("jobs.fields.clm_total")}>
                        <CurrencyFormatter>
                            {(event.job && event.job.clm_total) || ""}
                        </CurrencyFormatter>
                    </DataLabel>
                    <DataLabel hideIfNull label={t("jobs.fields.ins_co_nm")}>
                        {(event.job && event.job.ins_co_nm) || ""}
                    </DataLabel>
                    <DataLabel hideIfNull label={t("jobs.fields.clm_no")}>
                        {(event.job && event.job.clm_no) || ""}
                    </DataLabel>
                    <DataLabel label={t("jobs.fields.ownr_ea")}>
                        {(event.job && event.job.ownr_ea) || ""}
                    </DataLabel>
                    <DataLabel label={t("jobs.fields.ownr_ph1")}>
                        <ChatOpenButton
                            phone={event.job && event.job.ownr_ph1}
                            jobid={event.job.id}
                        />
                    </DataLabel>
                    <DataLabel label={t("jobs.fields.ownr_ph2")}>
                        <ChatOpenButton
                            phone={event.job && event.job.ownr_ph2}
                            jobid={event.job.id}
                        />
                    </DataLabel>
                    <DataLabel label={t("jobs.fields.alt_transport")}>
                        {(event.job && event.job.alt_transport) || ""}
                        <ScheduleAtChange job={event && event.job}/>
                    </DataLabel>
                    <ScheduleEventNote event={event}/>
                </div>
            ) : (
                <div>{event.note || ""}</div>
            )}
            <Divider/>
            <Space wrap>
                {event.job ? (
                    <Link to={`/manage/jobs/${event.job && event.job.id}`}>
                        <Button>{t("appointments.actions.viewjob")}</Button>
                    </Link>
                ) : null}
                {event.job ? (
                    <Button
                        onClick={() => {
                            history({
                                search: queryString.stringify({
                                    ...searchParams,
                                    selected: event.job.id,
                                }),
                            });
                        }}
                    >
                        {t("appointments.actions.preview")}
                    </Button>
                ) : null}
                {event.job ? (
                    <Dropdown
                        menu={{
                            items: [
                                {
                                    key: "email",
                                    label: t("general.labels.email"),
                                    disabled: event.arrived,
                                    onClick: () => {
                                        const Template = TemplateList("job").appointment_reminder;
                                        GenerateDocument(
                                            {
                                                name: Template.key,
                                                variables: {id: event.job.id},
                                            },
                                            {
                                                to: event.job && event.job.ownr_ea,
                                                subject: Template.subject,
                                            },
                                            "e",
                                            event.job && event.job.id
                                        );
                                    },
                                },
                                {
                                    key: "sms",
                                    label: t("general.labels.sms"),
                                    disabled: event.arrived || !bodyshop.messagingservicesid,
                                    onClick: () => {
                                        const p = parsePhoneNumber(event.job.ownr_ph1, "CA");
                                        if (p && p.isValid()) {
                                            openChatByPhone({
                                                phone_num: p.formatInternational(),
                                                jobid: event.job.id,
                                            });
                                            setMessage(
                                                t("appointments.labels.reminder", {
                                                    shopname: bodyshop.shopname,
                                                    date: dayjs(event.start).format("MM/DD/YYYY"),
                                                    time: dayjs(event.start).format("HH:mm a"),
                                                })
                                            );
                                            setOpen(false);
                                        } else {
                                            notification["error"]({
                                                message: t("messaging.error.invalidphone"),
                                            });
                                        }
                                    },
                                },
                            ]
                        }}
                    >
                        <Button>{t("appointments.actions.sendreminder")}</Button>
                    </Dropdown>
                ) : null}
                {event.arrived ? (
                    <Button
                        // onClick={() => handleCancel(event.id)}
                        disabled={event.arrived}
                    >
                        {t("appointments.actions.cancel")}
                    </Button>
                ) : (
                    <Popover
                        trigger="click"
                        disabled={event.arrived}
                        content={
                            <Form
                                layout="vertical"
                                onFinish={({lost_sale_reason}) => {
                                    handleCancel({id: event.id, lost_sale_reason});
                                }}
                            >
                                <Form.Item
                                    name="lost_sale_reason"
                                    label={t("jobs.fields.lost_sale_reason")}
                                    rules={[
                                        {
                                            required: true,
                                            //message: t("general.validation.required"),
                                        },
                                    ]}
                                >
                                    <Select
                                        options={bodyshop.md_lost_sale_reasons.map((lsr) => ({
                                            label: lsr,
                                            value: lsr,
                                        }))}
                                    />
                                </Form.Item>
                                <Button htmlType="submit">
                                    {t("appointments.actions.cancel")}
                                </Button>
                            </Form>
                        }
                    >
                        <Button
                            // onClick={() => handleCancel(event.id)}
                            disabled={event.arrived}
                        >
                            {t("appointments.actions.cancel")}
                        </Button>
                    </Popover>
                )}

                {event.isintake ? (
                    <Button
                        disabled={event.arrived}
                        onClick={() => {
                            setOpen(false);
                            setScheduleContext({
                                actions: {refetch: refetch},
                                context: {
                                    jobId: event.job.id,
                                    job: event.job,
                                    previousEvent: event.id,
                                    color: event.color,
                                    alt_transport: event.job && event.job.alt_transport,
                                    note: event.note,
                                },
                            });
                        }}
                    >
                        {t("appointments.actions.reschedule")}
                    </Button>
                ) : (
                    <ScheduleManualEvent event={event}/>
                )}
                {event.isintake ? (
                    <Link
                        to={{
                            pathname: `/manage/jobs/${event.job && event.job.id}/intake`,
                            search: `?appointmentId=${event.id}`,
                        }}
                    >
                        <Button disabled={event.arrived}>
                            {t("appointments.actions.intake")}
                        </Button>
                    </Link>
                ) : null}
            </Space>
        </div>
    );

    const RegularEvent = event.isintake ? (
        <Space
            wrap
            size="small"
            style={{
                backgroundColor:
                    event.color && event.color.hex ? event.color.hex : event.color,
            }}
        >
            {event.note && <AlertFilled className="production-alert"/>}
            <strong>{`${event.job.ro_number || t("general.labels.na")}`}</strong>

            <OwnerNameDisplay ownerObject={event.job}/>

            {`${(event.job && event.job.v_model_yr) || ""} ${
                (event.job && event.job.v_make_desc) || ""
            } ${(event.job && event.job.v_model_desc) || ""}`}

            {`(${(event.job && event.job.labhrs.aggregate.sum.mod_lb_hrs) || "0"} / ${
                (event.job && event.job.larhrs.aggregate.sum.mod_lb_hrs) || "0"
            })`}

            {event.job && event.job.alt_transport && (
                <div style={{margin: ".1rem"}}>{event.job.alt_transport}</div>
            )}
        </Space>
    ) : (
        <div
            style={{
                height: "100%",
                width: "100%",
                backgroundColor:
                    event.color && event.color.hex ? event.color.hex : event.color,
            }}
        >
            <strong>{`${event.title || ""}`}</strong>
        </div>
    );

    return (
        <Popover
            open={open}
            onOpenChange={(vis) => !event.vacation && setOpen(vis)}
            trigger="click"
            content={event.block ? blockContent : popoverContent}
            style={{
                height: "100%",
                width: "100%",

                backgroundColor:
                    event.color && event.color.hex ? event.color.hex : event.color,
            }}
        >
            {RegularEvent}
        </Popover>
    );
}

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