import { Text, Dropdown, RangeSlide, VolumeLineGraph, Button } from 'components';
import { Col, Container, Row } from 'components/layout';
import { FC, useState } from 'react';
const deviceTypes = ['Default', 'External', 'Built-In'];

export const Voice: FC<VoiceProps> = ({}) => {
  const [deviceType, setDeviceType] = useState('Default');

  return (
    <Container mb="s">
      <Container>
        <>
          <Row>
            <Col flexGrow={1}>
              <Dropdown
                value={deviceType}
                items={deviceTypes}
                onChangeValue={setDeviceType}
                variant="outline"
                sizeVariant="large"
                dropdownVariant="text"
                titleColor="body"
                titleVariant="body"
                dropDownListPositionVariant="relative"
                dropdownHeight={120}
                label="Speaker Device"
                placeholder="Select speaker device"
              />
              <Text mt="s" variant="caption">
                Speaker Volume
              </Text>
              <RangeSlide height={6} mt="xs" slideColor="caption" />
            </Col>
            <Container m="xs" />
            <Col flexGrow={1} justifyContent="space-between">
              <Col>
                <Text variant="caption">Speaker test</Text>
                <VolumeLineGraph mt="xs" height={16} lineWidth={4} activeLinesCount={0} />
              </Col>
              <Row>
                <Button
                  title="Let's Check"
                  variant="outline"
                  sizeVariant="medium"
                  borderColorVariant="primary"
                  titleVariant="body"
                  titleColor="primary"
                />
                <Container m="xs" />
                <Container
                  style={{
                    width: 0,
                    flexGrow: 1,
                    flex: 1,
                  }}
                >
                  <Text textBreakStrategy="balanced" variant="caption">
                    Having speaker issues? Start a test and listen.
                  </Text>
                </Container>
              </Row>
            </Col>
          </Row>

          <Row mt="xl">
            <Col flexGrow={1}>
              <Dropdown
                value={deviceType}
                items={deviceTypes}
                onChangeValue={setDeviceType}
                variant="outline"
                sizeVariant="large"
                dropdownVariant="text"
                titleColor="body"
                titleVariant="body"
                dropDownListPositionVariant="relative"
                dropdownHeight={120}
                label="Microphone device"
                placeholder="Select speaker device"
              />
              <Text mt="s" variant="caption">
                Microphone volume
              </Text>
              <RangeSlide height={6} mt="xs" slideColor="caption" />
            </Col>
            <Container m="xs" />
            <Col flexGrow={1} justifyContent="space-between">
              <Col>
                <Text variant="caption">Speaker test</Text>
                <VolumeLineGraph mt="xs" height={16} lineWidth={4} activeLinesCount={0} />
              </Col>
              <Row>
                <Button
                  title="Let's Check"
                  variant="outline"
                  sizeVariant="medium"
                  borderColorVariant="primary"
                  titleVariant="body"
                  titleColor="primary"
                />
                <Container m="xs" />
                <Container
                  style={{
                    width: 0,
                    flexGrow: 1,
                    flex: 1,
                  }}
                >
                  <Text textBreakStrategy="balanced" variant="caption">
                    Having speaker issues? Start a test and listen.
                  </Text>
                </Container>
              </Row>
            </Col>
          </Row>
        </>
      </Container>
      <Row mt="xl" justifyContent="space-between">
        <Button
          colorVariant="base-02"
          width={150}
          onPress={() => {}}
          shapeVariant="round"
          sizeVariant="large"
          title="Cancel"
          titleColor="caption"
          hoverColorVariant="base-02-hover"
        />
        <Button
          colorVariant="primary"
          width={150}
          onPress={() => {}}
          shapeVariant="round"
          sizeVariant="large"
          hoverTitleColorVariant="title"
          hoverColorVariant="primary-hover"
          title="Save Changes"
        />
      </Row>
    </Container>
  );
};
type VoiceProps = {};