import { RtFrame } from '@dpa/react-frame-intro';
import { RtItem, RtList } from '@dpa/react-item';
import { RtText } from '@dpa/react-text';
import { SparkTypographyIcon } from '@dpa/react-typography-icons';
import { RtAvatar } from '@dpa/react-avatar';
import { RtCheckbox } from '@dpa/react-checkbox';
import { useState } from 'react';

export const ItemPage = () => {
  return (
    <div>
      <RtFrame
        as="div"
        surface="foundation-low-tint"
        use="neutral"
        style={{
          minHeight: '100vh',
          padding: '40px',
          display: 'flex',
          flexDirection: 'column',
          gap: '20px',
        }}
      >
        <RtFrame
          as="div"
          surface="foundation-pure"
          use="cloudy"
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '20px',
            borderRadius: '10px',
            padding: '24px',
          }}
        >
          <RtText typography="title-md-medium">
            Rt Item ReadOnly MD Normal
          </RtText>
          <RtItem id="1" readOnly use="neutral" label="label" size="md" />
        </RtFrame>

        <RtFrame
          as="div"
          surface="foundation-pure"
          use="cloudy"
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '20px',
            borderRadius: '10px',
            padding: '24px',
          }}
        >
          <RtText typography="title-md-medium">
            Rt Item ReadOnly LG Normal
          </RtText>
          <RtItem id="1" readOnly use="neutral" label="label" size="lg" />

          <RtItem
            id="1"
            readOnly
            use="neutral"
            label="label"
            subLabel="subLabel"
            size="lg"
          />

          <RtItem
            id="1"
            readOnly
            use="neutral"
            label="label"
            subLabel="subLabel"
            actionState="loading"
            size="lg"
          />

          <RtItem
            id="1"
            readOnly
            use="neutral"
            label="label"
            subLabel="subLabel"
            actionVariant="clear"
            size="lg"
          />
          <RtItem
            id="2"
            readOnly
            use="neutral"
            label="label"
            subLabel="subLabel"
            actionState="loading"
            actionVariant="clear"
            size="lg"
          />

          <RtItem
            id="3"
            readOnly
            use="neutral"
            label="label"
            subLabel="subLabel"
            actionState="dragging"
            actionVariant="clear"
            size="lg"
          />
        </RtFrame>

        <RtFrame
          as="div"
          surface="foundation-pure"
          use="cloudy"
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '20px',
            borderRadius: '10px',
            padding: '24px',
          }}
        >
          <RtText typography="title-md-medium">
            Rt Item ReadOnly MD Space
          </RtText>
          <RtItem
            id="4"
            readOnly
            use="neutral"
            label="label"
            variant="space"
            size="md"
          />

          <RtItem
            id="4"
            readOnly
            use="neutral"
            label="label"
            subLabel="subLabel"
            actionVariant="info"
            variant="space"
            size="md"
          />
          <RtItem
            id="5"
            readOnly
            use="neutral"
            label="label"
            subLabel="subLabel"
            actionState="loading"
            actionVariant="info"
            variant="space"
            size="md"
          />
          <RtItem
            id="6"
            readOnly
            use="neutral"
            label="label"
            subLabel="subLabel"
            actionState="dragging"
            actionVariant="info"
            variant="space"
            size="md"
          />
        </RtFrame>

        <RtFrame
          as="div"
          surface="foundation-pure"
          use="cloudy"
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '20px',
            borderRadius: '10px',
            padding: '24px',
          }}
        >
          <RtText typography="title-md-medium">
            Rt Item ReadOnly LG Space
          </RtText>
          <RtItem
            id="1"
            readOnly
            use="neutral"
            label="label"
            size="lg"
            variant="space"
          />
        </RtFrame>

        <RtFrame
          as="div"
          surface="foundation-pure"
          use="cloudy"
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '20px',
            borderRadius: '10px',
            padding: '24px',
          }}
        >
          <RtText typography="title-md-medium">Rt Item LG Normal</RtText>
          <RtItem
            use="neutral"
            label="Label"
            subLabel="SubLabel"
            leadingSlot={<div>Lslot</div>}
            trailingSlot={<div>Tslot</div>}
            variant="normal"
            size="lg"
            labelSlot={<div>Lblslot</div>}
            trailingActionSlot={<div>Actslot</div>}
            trailingActionLabel="Action"
            leadingIcon={SparkTypographyIcon}
            trailingIcon={SparkTypographyIcon}
            onClick={() => console.log('click')}
          />
          <RtItem
            use="neutral"
            label="Label"
            subLabel="SubLabel"
            leadingSlot={<div>Lslot</div>}
            trailingSlot={<div>Tslot</div>}
            variant="normal"
            size="lg"
            labelSlot={<div>Lblslot</div>}
            trailingActionSlot={<div>Actslot</div>}
            trailingActionLabel="Action"
            leadingIcon={SparkTypographyIcon}
            trailingIcon={SparkTypographyIcon}
            subLabelSpecification="variant"
            onActionClick={() => console.log('action click')}
            onClick={() => console.log('click')}
          />

          <RtItem
            use="error"
            label="Label"
            leadingSlot={<div>Lslot</div>}
            trailingSlot={<div>Tslot</div>}
            variant="normal"
            size="lg"
            labelSlot={<div>Lblslot</div>}
            trailingActionSlot={<div>Actslot</div>}
            trailingActionLabel="Action"
            leadingIcon={SparkTypographyIcon}
            trailingIcon={SparkTypographyIcon}
            onActionClick={() => console.log('action click')}
          />
          <RtItem
            use="warning"
            label="Label"
            variant="normal"
            size="lg"
            trailingActionLabel="Action"
            leadingIcon={SparkTypographyIcon}
            trailingIcon={SparkTypographyIcon}
            onActionClick={() => console.log('action click')}
          />
          <RtItem
            use="success"
            label="Label"
            variant="normal"
            size="lg"
            onActionClick={() => console.log('action click')}
          />
          <RtItem
            disabled
            use="success"
            label="Label"
            variant="normal"
            size="lg"
            onActionClick={() => console.log('action click')}
          />
          <RtItem
            use="warning"
            label="Label"
            subLabel="SubLabel"
            variant="normal"
            size="lg"
            labelSlot={<div>Lblslot</div>}
            leadingIcon={SparkTypographyIcon}
            trailingIcon={SparkTypographyIcon}
            onActionClick={() => console.log('action click')}
          />
        </RtFrame>

        <RtFrame
          as="div"
          surface="foundation-pure"
          use="cloudy"
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '20px',
            borderRadius: '10px',
            padding: '24px',
          }}
        >
          <RtText typography="title-md-medium">Rt Item MD Space</RtText>
          <RtItem
            use="neutral"
            label="Label"
            subLabel="SubLabel"
            leadingSlot={<div>Lslot</div>}
            trailingSlot={<div>Tslot</div>}
            variant="space"
            size="md"
            labelSlot={<div>Lblslot</div>}
            trailingActionSlot={<div>Actslot</div>}
            trailingActionLabel="Action"
            leadingIcon={SparkTypographyIcon}
            trailingIcon={SparkTypographyIcon}
            onActionClick={() => console.log('action click')}
          />
          <RtItem
            use="neutral"
            label="Label"
            subLabel="SubLabel"
            leadingSlot={<div>Lslot</div>}
            trailingSlot={<div>Tslot</div>}
            variant="space"
            size="md"
            labelSlot={<div>Lblslot</div>}
            trailingActionSlot={<div>Actslot</div>}
            trailingActionLabel="Action"
            leadingIcon={SparkTypographyIcon}
            trailingIcon={SparkTypographyIcon}
            subLabelSpecification="variant"
            onActionClick={() => console.log('action click')}
          />

          <RtItem
            use="error"
            label="Label"
            variant="space"
            size="md"
            labelSlot={<div>Lblslot</div>}
            trailingActionSlot={<div>Actslot</div>}
            trailingActionLabel="Action"
            leadingIcon={SparkTypographyIcon}
            trailingIcon={SparkTypographyIcon}
            onActionClick={() => console.log('action click')}
          />

          <RtItem
            use="warning"
            label="Label"
            variant="space"
            size="md"
            trailingActionLabel="Action"
            leadingIcon={SparkTypographyIcon}
            trailingIcon={SparkTypographyIcon}
            onActionClick={() => console.log('action click')}
          />

          <RtItem
            use="success"
            label="Label"
            variant="space"
            size="md"
            onActionClick={() => console.log('action click')}
          />

          <RtItem
            disabled
            use="success"
            label="Label"
            variant="normal"
            size="md"
            trailingActionLabel="Action"
            onActionClick={() => console.log('action click')}
          />
        </RtFrame>

        <RtFrame
          as="div"
          surface="foundation-pure"
          use="cloudy"
          style={{
            display: 'flex',
            flexDirection: 'column',
            gap: '20px',
            borderRadius: '10px',
            padding: '24px',
          }}
        >
          <RtText typography="title-md-medium">Rt Item Examples</RtText>
          slots
          <RtItem
            use="neutral"
            label="Label"
            subLabel="SubLabel"
            size="lg"
            labelSlot={<RtAvatar use="neutral" username="username" readOnly />}
            trailingActionSlot={
              <RtAvatar use="neutral" username="Test" readOnly />
            }
            trailingActionLabel="Action"
            leadingSlot={<RtAvatar use="neutral" username="Oleg" readOnly />}
            trailingSlot={<RtAvatar use="neutral" username="User" readOnly />}
            onActionClick={() => console.log('action click')}
          />
          slots & icons
          <RtItem
            use="neutral"
            label="Label"
            subLabel="SubLabel"
            leadingSlot={<RtAvatar use="neutral" username="Oleg" readOnly />}
            trailingSlot={<RtAvatar use="neutral" username="User" readOnly />}
            variant="space"
            size="md"
            labelSlot={<RtAvatar use="neutral" username="username" readOnly />}
            trailingActionSlot={
              <RtAvatar use="neutral" username="Test" readOnly />
            }
            trailingActionLabel="Action"
            leadingIcon={SparkTypographyIcon}
            trailingIcon={SparkTypographyIcon}
            onActionClick={() => console.log('action click')}
          />
          long label 2 lines
          <div
            style={{
              outline: 'dashed red 1px',
              padding: '5px',
              color: 'red',
              maxWidth: 500,
            }}
          >
            <RtItem
              use="neutral"
              label="Lorem ipsum dolor sit amet, consectetur adipisicing elit. amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. "
              subLabel="SubLabel"
              leadingSlot={<RtAvatar use="neutral" username="Oleg" readOnly />}
              trailingSlot={<RtAvatar use="neutral" username="User" readOnly />}
              variant="space"
              size="md"
              labelSlot={
                <RtAvatar use="neutral" username="username" readOnly />
              }
              trailingActionSlot={
                <RtAvatar use="neutral" username="Test" readOnly />
              }
              trailingActionLabel="Action"
              leadingIcon={SparkTypographyIcon}
              trailingIcon={SparkTypographyIcon}
              onActionClick={() => console.log('action click')}
              labelLineClamp={2}
            />
          </div>
          long label & sublabel 3 lines
          <div
            style={{
              outline: 'dashed red 1px',
              padding: '5px',
              color: 'red',
              maxWidth: 500,
            }}
          >
            <RtItem
              use="neutral"
              label="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. "
              subLabel="amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor "
              leadingSlot={<RtAvatar use="neutral" username="Oleg" readOnly />}
              trailingSlot={<RtAvatar use="neutral" username="User" readOnly />}
              variant="space"
              size="md"
              labelSlot={
                <RtAvatar use="neutral" username="username" readOnly />
              }
              trailingActionSlot={
                <RtAvatar use="neutral" username="Test" readOnly />
              }
              trailingActionLabel="Action"
              leadingIcon={SparkTypographyIcon}
              trailingIcon={SparkTypographyIcon}
              onActionClick={() => console.log('action click')}
              labelLineClamp={3}
              subLabelLineClamp={3}
            />
          </div>
          long label & sublabel
          <div
            style={{
              outline: 'dashed red 1px',
              padding: '5px',
              color: 'red',
              maxWidth: 500,
            }}
          >
            <RtItem
              use="neutral"
              label="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. "
              subLabel="amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor "
              leadingSlot={<RtAvatar use="neutral" username="Oleg" readOnly />}
              trailingSlot={<RtAvatar use="neutral" username="User" readOnly />}
              variant="space"
              size="md"
              labelSlot={
                <RtAvatar use="neutral" username="username" readOnly />
              }
              trailingActionSlot={
                <RtAvatar use="neutral" username="Test" readOnly />
              }
              trailingActionLabel="Action"
              leadingIcon={SparkTypographyIcon}
              trailingIcon={SparkTypographyIcon}
              onActionClick={() => console.log('action click')}
            />
          </div>
          simple long label
          <div
            style={{
              outline: 'dashed red 1px',
              padding: '5px',
              color: 'red',
              maxWidth: 500,
            }}
          >
            <RtItem
              use="neutral"
              label="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. "
              variant="space"
              size="md"
              trailingActionSlot={
                <RtAvatar use="neutral" username="Test" readOnly />
              }
              trailingActionLabel="Action"
            />
          </div>
        </RtFrame>
      </RtFrame>
    </div>
  );
};