// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import { CodeBlock } from "@coreai-ds/react-components";
import { Button } from "@coreai-ds/react-components";

export const FixedHeight = () => {
    const [showAll, setShowAll] = React.useState(false);
    const longSample = `import * as React from 'react';
import {
  Button,
  Card,
  CardFooter,
  CardHeader,
  Input,
  Text,
} from '@coreai-ds/react-components';

type ProfileFormProps = {
  initialName: string;
  initialRole: string;
  onSave: (profile: { name: string; role: string }) => void;
};

export function ProfileForm({
  initialName,
  initialRole,
  onSave,
}: ProfileFormProps): JSX.Element {
  const [name, setName] = React.useState(initialName);
  const [role, setRole] = React.useState(initialRole);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSave({ name, role });
  };

  return (
    <Card as="form" onSubmit={handleSubmit}>
      <CardHeader
        header={<Text preset="heading5">Profile</Text>}
        description={
          <Text foreground={3}>
            Update the details shown to your team.
          </Text>
        }
      />

      <Input
        label="Name"
        value={name}
        onChange={(_event, data) => setName(data.value)}
      />
      <Input
        label="Role"
        value={role}
        onChange={(_event, data) => setRole(data.value)}
      />

      <CardFooter>
        <Button appearance="primary" type="submit">
          Save changes
        </Button>
      </CardFooter>
    </Card>
  );
}`;
    const styles = /* css */ `
      .code-block-fixed-height-example {
        width: 100%;
        height: 320px;
        max-width: 720px;
      }

      .code-block-fixed-height-example--expanded {
        height: auto;
      }
    `;
    return (<>
        <style>{styles}</style>
        <CodeBlock className={`code-block-fixed-height-example${showAll ? ' code-block-fixed-height-example--expanded' : ''}`} code={longSample} language="tsx" header={'user-profiles/ProfileForm.tsx'} footer={<Button appearance="subtle" size="small" aria-expanded={showAll} onClick={() => setShowAll((current) => !current)}>
              {showAll ? 'Show Less' : 'Show All'}
            </Button>}/>
      </>);
};

export default FixedHeight;