import Topbar from "../Topbar";

import Provider from "relements/build/esm/theme/provider";
import Box from "relements/build/esm/ui/box";
import Text from "relements/build/esm/ui/text";

import PropsBlock from "../../StorybookHelpers/PropsBlock";

<Provider>
    <Topbar
    baseUrl=""
          userDetails={{
            username: "Sid",
            authcode: "test",
            permissions: [
              "mogambo_all_view",
              "iva_analytics_all_view",
              "admin_publisher_tools_view",
              "platform_support_bot_user",
            ],
          }}
      screen="CS"
      onIVAChange={(iva) => console.log("IVA changed: ", iva)}
      onEnvChange={(env) => console.log("ENV changed: ", env)}
      onIVACreate={() => console.log("Create IVA Clicked")}
    />
<Box
  marginTop={64}
  flexDirection="column"
  style={{ maxHeight: "calc(100vh - 144px)", overflowY: "auto" }}
>
  <Text variant="display-3.semi-bold" color="blue.haptik">
    [WW]
  </Text>
  <Text variant="display-1.semi-bold">Topbar</Text>
  <Text variant="body.lg">A new helmet 🪖</Text>
</Box>

<Box marginTop={20} flexDirection="column">
  <Text variant="h1.semi-bold">Usage</Text>
  <pre>
      {
    `// Import
import Topbar from '@haptik/helpers/build/esm/Topbar';
    
// Usage
<Topbar
    baseURL="<base_url>"
    botID="<bot_id>"
    env="staging"  
    userDetails={{
        username: "<user_name>",
        useremail: "<user_email>",
        authcode: "<auth_code>",
        permissions: ["<permissions>"],
    }}
    screen="CS"
    onIVAChange={(iva) => console.log("IVA changed: ", iva)}
    onEnvChange={(env) => console.log("ENV changed: ", env)}
    onIVAListLoadComplete={(ivaList) => console.log("Bots loaded")}
    onSignOut={() => console.log("Sign out clicked")}
    mixPanelTracker={
      new MixPanel({
        CAS: "<cas>",
        "Tool Name": "<tool_name>",
        Environment: "<env>",
      })
    }
/>`
    }
    </pre>
</Box>

<Box marginTop={20} flexDirection="column">
  <Text variant="h1.semi-bold">Props</Text>
  <br />
  <PropsBlock of={Topbar} />
</Box>

  <Box marginTop={20} flexDirection="column">
    <Text variant="h1.semi-bold">Notes</Text> 
    <ul>
        <li style={{margin: '5px 0'}}>
            <Text>
            <Text variant="h3.bold">baseURL</Text> is optional, and defaults to window origin. If developers want to test it in their local server, then passing an explicit value is recommended. If IVA's API call fails, the tools which user has permissions to will be
            locked and IVA dropdown will not be rendered.
            </Text>
        </li>
        <li style={{margin: '5px 0'}}>
            <Text>
            If user does not have ANY permissions at all or <Text variant="h3.bold">userDetails</Text> is NOT passed - IVA
            selection, tools, etc. will not be rendered.
            </Text>
        </li>
        <li style={{margin: '5px 0'}}>
            <Text>
            Items in <Text variant="h3.bold">userDetails</Text> are required for platform support.
            </Text>
        </li>
        <li style={{margin: '5px 0'}}>
            <Text>
            When user switches the environment, the selected env is saved via this key
            in the local storage: <Text variant="h3.bold">ww_env</Text>
            </Text>
        </li>
        <li style={{margin: '5px 0'}}>
            <Text>
            When user selects an IVA, the selected IVA's data is saved via this key in
            the local storage: <Text variant="h3.bold">ww_iva</Text>
            </Text>
        </li>
        <li style={{margin: '5px 0'}}>
            <Text>
            When user selects an IVA, the selected IVA's linked business channels are saved via this key in
            the local storage: <Text variant="h3.bold">iva_businesses</Text>
            </Text>
        </li>
    </ul>
  </Box>
</Provider>