import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import Dialog from "./Dialog";
import Button from "components/UI/Button";
import Box from "components/UI/Box";
import Text from "components/UI/Text";
import Icon from "components/UI/Icon";

# Dialog

<CodeBlock title="Alert Dialog">
  {(value, setValue) => (
    <div>
      <Button onClick={() => setValue(true)}> Open Modal </Button>
      <Dialog
        onClose={() => setValue(false)}
        active={value}
        title="Do you want to configure Zenchat?"
        subtitle="You will have to deactivate salesforce to activate zendesk as your new Agent Escalation tool."
        primaryActionText="Delete salesforce"
        secondaryAction={() => {
          alert("secondaryAction clicked!");
        }}
        secondaryActionText="Cancel"
      />
    </div>
  )}
</CodeBlock>

> without title

<CodeBlock title="Alert Dialog">
  {(value, setValue) => (
    <div>
      <Button onClick={() => setValue(true)}> Open Modal </Button>
      <Dialog
        onClose={() => setValue(false)}
        active={value}
        subtitle="You will have to deactivate salesforce to activate zendesk as your new Agent Escalation tool."
        primaryActionText="Delete salesforce"
        secondaryActionText="Cancel"
      />
    </div>
  )}
</CodeBlock>

> without subtitle

<CodeBlock title="Alert Dialog">
  {(value, setValue) => (
    <div>
      <Button onClick={() => setValue(true)}> Open Modal </Button>
      <Dialog
        onClose={() => setValue(false)}
        active={value}
        title="Do you want to configure Zenchat?"
        primaryActionText="Delete salesforce"
        secondaryActionText="Cancel"
      />
    </div>
  )}
</CodeBlock>

> with default button

<CodeBlock title="Alert Dialog">
  {(value, setValue) => (
    <div>
      <Button onClick={() => setValue(true)}> Open Modal </Button>
      <Dialog
        onClose={() => setValue(false)}
        active={value}
        title="Do you want to configure Zenchat?"
        subtitle="You will have to deactivate salesforce to activate zendesk as your new Agent Escalation tool."
      />
    </div>
  )}
</CodeBlock>

> with primary button only

<CodeBlock title="Alert Dialog">
  {(value, setValue) => (
    <div>
      <Button onClick={() => setValue(true)}> Open Modal </Button>
      <Dialog
        onClose={() => setValue(false)}
        active={value}
        title="Proactive Messaging"
        subtitle="With Proactive Messaging, you can initiate personalized notifications to engage the customer at the right time in their journey."
        secondaryActionText={null}
        primaryActionText="Continue to Setup"
        dialogStyles={{
          padding: "50px 50px 32px",
          width: "652px",
        }}
      >
        <Box
          flexDirection="column"
          padding="24px"
          backgroundColor="#EFEFEF"
          marginTop="30px"
        >
          <Box padding="4px 0" alignItems="center">
            <Box marginRight="4px">
              <Icon src="grid" size="small" />
            </Box>
            <Text variant="body.md">
              {" "}
              Notify your customers with periodic updates to keep them informed
              about orders, payments, and shipping updates.
            </Text>
          </Box>
          <Box padding="4px 0" alignItems="center">
            <Box marginRight="4px">
              <Icon src="gear" size="small" />
            </Box>
            <Text variant="body.md">
              Recover abandoned carts and improve conversion rates
            </Text>
          </Box>
          <Box padding="4px 0" alignItems="center">
            <Box marginRight="4px">
              <Icon src="plus" size="small" />
            </Box>
            <Text variant="body.md">
              Monitor and optimize campaign performance and track metrics like
              no. of messages sent, delivered, & read.
            </Text>
          </Box>
        </Box>
      </Dialog>
    </div>
  )}
</CodeBlock>

> with react child node

<CodeBlock title="Alert Dialog">
  {(value, setValue) => (
    <div>
      <Button onClick={() => setValue(true)}> Open Modal </Button>
      <Dialog
        onClose={() => setValue(false)}
        active={value}
        subtitle={
          <>
            You have logged in with{" "}
            <Text variant="h3.semi-bold">raushan.prasad@haptik.ai</Text>
          </>
        }
        secondaryActionText={null}
        primaryActionText="Contact Haptik Support"
        dialogStyles={{
          padding: "50px 50px 32px",
          width: "720px",
        }}
      >
        <Box
          width="500px"
          borderRadius="4px"
          padding="20px"
          backgroundColor="#FAD8DB"
          border="1px solid #D91E2D"
          borderWidth="1px"
          margin="30px 0"
          justifyContent="center"
        >
          <Text variant="body.md" color="red.neon">
            Multiple organisations exist for this domain
          </Text>
        </Box>
        <Text variant="body.md">
          Please contact Haptik Support to get added to to the correct
          organisation
        </Text>
      </Dialog>
    </div>
  )}
</CodeBlock>