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">bhakti.bhikne@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>
