/* eslint-disable react/jsx-key, react-native/no-inline-styles */
import { EmptyState } from "@/components/EmptyState"
import { s } from "@/utils/responsive"

import { DemoDivider } from "../DemoDivider"
import { Demo } from "./types"
import { DemoUseCase } from "../DemoUseCase"

export const DemoEmptyState: Demo = {
  name: "EmptyState",
  description: "demoEmptyState:description",
  data: ({ theme }) => [
    <DemoUseCase
      name="demoEmptyState:useCase.presets.name"
      description="demoEmptyState:useCase.presets.description"
    >
      <EmptyState preset="generic" />
    </DemoUseCase>,

    <DemoUseCase
      name="demoEmptyState:useCase.passingContent.name"
      description="demoEmptyState:useCase.passingContent.description"
    >
      <EmptyState
        imageSource={require("@assets/images/logo.png")}
        headingTx="demoEmptyState:useCase.passingContent.customizeImageHeading"
        contentTx="demoEmptyState:useCase.passingContent.customizeImageContent"
      />

      <DemoDivider size={30} line />

      <EmptyState
        headingTx="demoEmptyState:useCase.passingContent.viaHeadingProp"
        contentTx="demoEmptyState:useCase.passingContent.viaContentProp"
        buttonTx="demoEmptyState:useCase.passingContent.viaButtonProp"
      />

      <DemoDivider size={30} line />

      <EmptyState
        headingTx="showroomScreen:demoViaSpecifiedTxProp"
        headingTxOptions={{ prop: "heading" }}
        contentTx="showroomScreen:demoViaSpecifiedTxProp"
        contentTxOptions={{ prop: "content" }}
        buttonTx="showroomScreen:demoViaSpecifiedTxProp"
        buttonTxOptions={{ prop: "button" }}
      />
    </DemoUseCase>,

    <DemoUseCase
      name="demoEmptyState:useCase.styling.name"
      description="demoEmptyState:useCase.styling.description"
    >
      <EmptyState
        preset="generic"
        style={{ backgroundColor: theme.colors.error, paddingVertical: s(20) }}
        imageStyle={{ height: s(75), tintColor: theme.colors.palette.neutral100 }}
        ImageProps={{ resizeMode: "contain" }}
        headingStyle={{
          color: theme.colors.palette.neutral100,
          textDecorationLine: "underline",
          textDecorationColor: theme.colors.palette.neutral100,
        }}
        contentStyle={{
          color: theme.colors.palette.neutral100,
          textDecorationLine: "underline",
          textDecorationColor: theme.colors.palette.neutral100,
        }}
        buttonStyle={{ alignSelf: "center", backgroundColor: theme.colors.palette.neutral100 }}
        buttonTextStyle={{ color: theme.colors.error }}
        ButtonProps={{
          preset: "reversed",
        }}
      />
    </DemoUseCase>,
  ],
}