import { FC } from 'react';
import {
  Button,
  Card,
  Checkbox,
  Col,
  Container,
  Divider,
  Row,
  ScrollView,
  Text,
  TextField,
  Dropdown,
} from 'components';
import { Information } from 'icons';

export const DomainsSecurity: FC = () => {
  return (
    <ScrollView mx="l" pt="xs">
      <Text mb="m" variant="title">
        Domains Security
      </Text>
      <Card variant="plain" colorVariant="base-01" p="l">
        <Col>
          <Text variant="caption">Domain</Text>
          <Text variant="body" color="title" mt="xs">
            meridianuniversity
          </Text>
        </Col>
        <Container alignSelf="flex-start">
          <Button
            mt="xs"
            sizeVariant="content"
            leftElement={<Information colorVariant="primary" />}
            rightElement={
              <Text ml={-5} variant="caption">
                to add a custom domain
              </Text>
            }
            title={
              <Text ml={-5} variant="caption" weightVariant="bold" color="primary">
                Contact support
              </Text>
            }
          />
        </Container>

        <Col mt="l">
          <Text variant="caption">Email Domains</Text>
          <Text variant="body" color="title" mt="xs">
            meridianuniversity
          </Text>
          <Text variant="body" color="title" mt="xs">
            meridianuniversity
          </Text>
          <Text variant="body" color="title" mt="xs">
            meridianuniversity
          </Text>
        </Col>

        <Divider my="l" colorVariant="divider-01" />

        <Checkbox
          isActive={false}
          colorVariant="base"
          rightTitle="Disable Publishing Public Pages"
        />

        <Checkbox
          mt="l"
          isActive={false}
          colorVariant="base"
          rightTitle="Allow all full users to create spaces"
        />

        <Text variant="caption" mt="l">
          Single Sign-On Configuration
        </Text>
        <Checkbox mt="s" isActive={false} colorVariant="base" rightTitle="Enable SAML" />
        <Checkbox mt="s" isActive={false} colorVariant="base" rightTitle="Require SAML" />
        <Container mt="l" flexGrow={1}>
          <Text mb="2xs" variant="body" color="title">
            Default Space
          </Text>
          <Dropdown
            onChangeValue={() => {}}
            items={['Open', 'Close']}
            value="1"
            sizeVariant="medium"
            variant="outline"
            dropdownVariant="outline"
            placeholder="Select Default Space"
          />
        </Container>
        <Row>
          <Container flexGrow={1} mt="l">
            <Text mb="2xs" variant="caption">
              Entity Id
            </Text>
            <TextField
              sizeVariant="medium"
              shapeVariant="round"
              colorVariant="base"
              variant="outline"
              placeholder="12345"
            />
          </Container>
          <Container mx="xs" />
          <Container mt="l" flexGrow={1}>
            <Text mb="2xs" variant="caption">
              Certificate
            </Text>
            <TextField
              sizeVariant="medium"
              shapeVariant="round"
              colorVariant="base"
              variant="outline"
              placeholder="12345"
            />
          </Container>
        </Row>
        <Container mt="l" flexGrow={1}>
          <Text mb="2xs" variant="caption">
            Sign In Url
          </Text>
          <TextField
            sizeVariant="medium"
            shapeVariant="round"
            colorVariant="base"
            variant="outline"
            placeholder="https://"
          />
        </Container>
      </Card>
    </ScrollView>
  );
};